テーブルレイアウトでwidthの指定にピクセルとパーセントを混在させる方法

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!知恵袋

CSSで table-layout: fixed; を指定してください。
横幅を指定したセルはその幅に、指定されていないセルは、残りの幅を均等割りしたサイズに割り当てられます。

 

これは、tableタグの表示方法を制御するためのCSSプロパティです。

table-layout-スタイルシートリファレンス

未指定の場合は初期値でautoが適用され、ブラウザはテーブル内の文字数などを把握したうえでバランスをみて自動的に幅を調整します。

この幅の自動調整をキャンセルするのがfixedです。fixedを指定するとユーザの指定する幅に従うようになるみたいです。

ただし、このプロパティはテーブルの1行目を見て幅を決定するため、1行目をcolspanで結合していると目的通りになりませんでした。

 

そんな場合にどうするのか、さらに踏み込んで調べてみると、非常にピンポイントな記事が見つかりました。

HTMLで「table-layout:fixed」つかってもTableが崩れる場合の対応方法 | 蒼いねずみのお仕事

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

こっちが上位に来るように、これから地味に普及していきたい所存。