html - 表の複数の列幅

Question

コードは次のとおりです。

<table>
<col style="width:10px"><col style="width:20px"><col style="width:30px">
<td>
....

これは、幅の異なる 3 つの列を定義します。テーブル全体 (3 列すべて) の CSS レイアウトを 1 つのエントリで定義する方法はありますか?

<table class="cols3">
...

この cols3 クラスは、このテーブルに事前定義された幅の 3 つの列があることを定義しますか?

Answer 1

子列でセレクターを使用できるnth-childため、css は次のようになります。

.cols3 col:nth-child(1){width:10px;}
.cols3 col:nth-child(2){width:20px;}
.cols3 col:nth-child(3){width:30px;}

nth-child セレクターでは、通常の 0 ではなく、最初の子要素を取得するために 1 が使用されることに注意してください。

Answer 2

3 列の場合、CSS セレクターを使用してみてください。

table.cols3 col:first-child{
 /* style for first*/
}

table.cols3:last-child{
/*style of last child (3rd column)*/
}

table.cols3 {
/*style for middle columns)*/
}

その他のセレクター (および例) については、こちらを確認してください