htmlのtable
タグを使ったテーブルレイアウトで、セルの幅を指定するwidth
属性にピクセル(px:固定幅)とパーセント(%:比率幅)を混在させたデザインを実現したいです。
経験則では、いろいろと上手くいかないことが多いこのデザインですが、必要になったので少し真面目に検証・調査しました。
実現したいこと
列1 | カラム1 | ||
---|---|---|---|
列1 | カラム1 | 列2 | カラム2 |
4列のテーブルレイアウトで、左から1,3列目は固定幅、2,4列目は比率幅にしたいです。
その上で、2列目は4列目よりも短くしたい。
調べたこと
使用するブラウザの種類やバージョンにもよりますが、table
タグでwidth
属性を指定して幅を操作しようとすると、ピクセルとパーセントを混在させた場合に、どこかの幅が目的通りにならないことがあります。
調べてみると、これを実現したい場合にはtable-layout: fixed
を使うとよいようです。
TABLEタグで、固定幅と、比率指定を混在させたい。 - TABLEタグで... - Yahoo!知恵袋
これは、table
タグの表示方法を制御するためのCSSプロパティです。
未指定の場合は初期値でauto
が適用され、ブラウザはテーブル内の文字数などを把握したうえでバランスをみて自動的に幅を調整します。
この幅の自動調整をキャンセルするのがfixed
です。fixed
を指定するとユーザの指定する幅に従うようになるみたいです。
ただし、このプロパティはテーブルの1行目を見て幅を決定するため、1行目をcolspan
で結合していると目的通りになりませんでした。
そんな場合にどうするのか、さらに踏み込んで調べてみると、非常にピンポイントな記事が見つかりました。
table-layout: fixed
ではtable
タグで1行目のtr
タグを幅の決定に参照しますが、tr
タグよりも先にcolgroup
タグとcol
タグを使って3,4列目の幅を指定することで実現できるようです。
実現したソースはこちら。
<table style="width: 100%; table-layout: fixed;">
<colgroup>
<col style="width: 60px;" />
<col style="width: 30%;" />
<col style="width: 60px;" />
<col />
</colgroup>
<tbody>
<tr>
<th>列1</th>
<td colspan="3">カラム1</td>
</tr>
<tr>
<th>列1</th>
<td>カラム1</td>
<th>列2</th>
<td>カラム2</td>
</tr>
</tbody>
</table>
colgroup
タグとcol
タグは存在こそ知っていたものの、このような活用方法があるというのは思いもよりませんでした。
なお、現在のGoogle検索では上位に来ませんが、developer.mozilla.orgの解説ではcol
タグにも触れてくれています。
table-layout - CSS: カスケーディングスタイルシート | MDN
こっちが上位に来るように、これから地味に普及していきたい所存。