CSS: table(テーブル)の列幅の割合を指定する
CSS で table(テーブル)の列幅の割合 (パーセンテージや実数値)を指定するには table-layout プロパティを使用します。
table-layout プロパティの値は auto(自動レイアウト)と fixed(固定レイアウト)があり、 fixed を指定した場合は、1行目に指定された列幅の割合や実数値をテーブル全体に適用します。
列幅の割合を指定するサンプル
次のテーブルは、3つの列があり、テーブル全体を「width: 100%」、列幅を左から30%、40%、40% に指定しています。
ヘッダ 30% | ヘッダ 40% | ヘッダ 40% |
---|---|---|
データ | データ | データ |
データ | データ | データ |
データ | データ | データ |
HTML + CSS
<table>
<tr><th class="width30">ヘッダ 30</th><th class="width40">ヘッダ 40</th><th class="width40">ヘッダ 40</th></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</table>
<style>
table, th, td {
border: 1px solid black;
}
table {
table-layout: fixed;
width: 100%;
}
th.width30 {
width: 30%;
}
th.width40 {
width: 40%;
}
</style>
赤字部分がポイントとなる所です。
table-layout プロパティをfixed にする場合、まず全体の横幅を指定する必要があります。 そこで table 要素に対して「width: 100%」を指定します。
次に1行目に指定された列幅の割合や実数値をテーブル全体に適用するので、 th 要素に対して列幅の割合や実数値を指定します。 このサンプルではクラスを使用して割合を指定しています。
下のコードは th 要素に対して「class="width30"」を指定しています。
<th class="width30">ヘッダ 30</th>
次のコードは「class="width30"」が指定された th 要素に対して「width: 30%」を指定してい
ます。
th.width30 {
width: 30%;
}
列幅が指定されていない場合
上のサンプルでは、全ての列幅の割合を指定しました。
もし幅が「指定されていない列」がある場合は、 まず「指定されている列」に対して指定列幅を割り当て、 残りの幅が「指定されていない列」に対して均等に割り当てられます。