テーブルのtd値を使用して列（​​）を設定する方法

Question

tdの値を使用してtd幅を設定したいとします。私は単にあなたが以下で見ることができる動的なテーブルを作成しました。

<table> 
    <tr> 
     <td class="heading">Post Name</td> 
     <td class="heading">Number of Post Available</td> 
     <td class="heading">Age Limit</td> 
     <td class="heading">Qualification</td> 
    </tr> 
    <tr> 
     <td>Junior Engineer</td> 
     <td>50</td> 
     <td>21-30</td> 
     <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
    </tr> 
</table> 

私は知らないどのテーブルに来フォームのmysqlを重視、テーブルの構造は次のように変更され、いくつかの回...だから私は、TDの幅を変更することを

<table> 
    <tr> 
     <td class="heading">Post Name</td> 
     <td class="heading">Number of Post Available</td> 
     <td class="heading"></td> 
     <td class="heading">Qualification</td> 
    </tr> 
    <tr> 
     <td>Junior Engineer</td> 
     <td>50</td> 
     <td></td> 
     <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
    </tr> 
</table> 

tdの値が修飾の場合、width = "40％"、または値がageの場合は幅10％を設定します。

私はそれが可能かどうかわかりません。それはwidth属性だと

Answer 1

あなたはこのに近づくことができるかについて、いくつかの異なるオプションを持っていますマークアップの柔軟性によって異なります。既存のマークアップ/書式設定を調整することができる場合

あなたは（直接またはCSSスタイルを介して）テーブルのヘッダーを使用し、それらに適切な幅を適用することを検討し、可能性があり、表ヘッダ

を活用し、これらの値は、その列の子セル内に反映されるであろう。さらに

table .heading { 
 
    width: 10%; 
 
} 
 

 
table .qualification { 
 
    width: 40%; 
 
}

<table> 
 
    <tr> 
 
    <th class="heading">Post Name</th> 
 
    <th class="heading">Number of Post Available</th> 
 
    <th class="heading"></th> 
 
    <th class="heading qualification">Qualification</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Junior Engineer</td> 
 
    <td>50</td> 
 
    <td></td> 
 
    <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
 
    </tr> 
 
</table>

、このアプローチを使用すると、おそらく "見出し"スタイルを控えて、その代わりに<th>要素を使用してスタイルをスタイルすることができます。

はあなたの細胞の特定の順序を変更するつもりされていない場合は、あなただけの4列目を対象とし、他のすべてのをターゲットにする前に、セレクタを使用するnth-child()セレクタの利点を取ることができるCSSセレクタ

考えてみましょう要素：

table td { width: 10%; } 
table td:nth-child(4) { width: 40%; } 

table td { 
 
    width: 10%; 
 
} 
 

 
table td:nth-child(4) { 
 
    width: 40%; 
 
}

<table> 
 
    <tr> 
 
    <td class="heading">Post Name</td> 
 
    <td class="heading">Number of Post Available</td> 
 
    <td class="heading"></td> 
 
    <td class="heading">Qualification</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Junior Engineer</td> 
 
    <td>50</td> 
 
    <td></td> 
 
    <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
 
    </tr> 
 
</table>

Answer 2

正しい方法ではなくtdタグのth（表ヘッダー）を使用することです：

<table> 
    <tr> 
    <th width="70%">Month</th> 
    <th width="30%">Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</table> 

https://www.w3schools.com/tags/att_th_width.asp