【CSS】table-layout: fixed;の使い方を解説
tableのセル幅のサイズ設定を均等割で同じにする

HTMLのテーブルがレイアウトに使われていたのは今や昔で、少し前まではtableタグを使うのを少し憚られた時代もあったような気がしますが、当然「表」の作成にはガンガン使われています。

そんなテーブルタグですが実は縦はその行数分自動的に伸びていくので問題ありませんが、横の列のサイズというのが意外と指定が難しいという事があったりしましたが、実は今はもう1つのタグで解決することが出来つつあります。

今回はそんなtableタグの横幅のサイズ設定を指定する時に、昔なら100÷列の数といった指定を昔はしたりもしていましたが、今では均等にする方法が用意されていたりするのでそちらを見ていきたいと思います。

そもそも通常だとどういう問題が生じるか

tableタグは通常thやtdなど各セルに横幅のサイズなど何も特に指定していなければ、下記のような感じになります。（余白やカラーなどは装飾が入っています）

このように、特に同じ長さのコンテンツが各セルに入っている場合は、何ら問題は起きません。しかしながら問題が起きるのは、下記のように特定のセルに長いコンテンツが入ってしまう場合です。

このように、セルの中に長いテキストなどが入ってしまう場合、どうしてもそのコンテンツに引っ張られてしまうため、コンテンツの長さによってサイズが決められてしまいます。

下記のように予め、サイズを各セル25%という指定をしておけば問題ありませんが、列が3つの場合、2つの場合、5つの場合と出てくるとその分だけcssを余分に設定をしなければなりません。

そこで、今回解説するタグの登場なのです。

table-layout: fixed; で均等割が可能

このタグを使う事によって、テーブルの各セルの横幅を全て同じ均等割にすることが可能になります。

実際のタグの使い方

実際の使い方は下記の通りです。
HTMLはなんの変哲もない、ただただそのままのtableタグのコードになり、1箇所だけコンテンツを長く書いています。

<table>
  <tr>
    <th>サンプル見出し</th>
    <th>サンプル見出し</th>
    <th>サンプル見出し</th>
    <th>サンプル見出し</th>
  </tr>
  <tr>
    <td>サンプルサンプルサンプル</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
  <tr>
    <td>サンプルサンプルサンプル</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
  <tr>
    <td>サンプルサンプル</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
</table>

table {
  width: 100%;
  table-layout: fixed;
}

このCSSの設定によって、各セルが均等割になります。
デフォルトの値はautoになっているため、ここをfixedとするだけで簡単に設定が可能です。

下記が実際に、上記のタグを設定したものになります。
コンテンツの長さに関わらず、各セルのサイズは均等割になっていますし、列数が変わってもそのまま均等割が維持されていきます。

特定のセルだけサイズ指定し他を均等割にする方法

このような均等割は非常に便利で使い勝手も良いのですが、実際にテーブルタグを使って行く場合には1つ目のセルだけは小さいサイズなど固定幅にしたいといったケースがあります。

そんな時もとても簡単で、そのセルだけサイズ指定をしてあげれば、そのセルは指定のサイズで表示され、他のセルは残りの幅を均等割にして表示してくれます。

実際のコード

先ほどと同じサンプルコードで見ていきましょう。
HTMLのコードはほとんど同じと言って良い内容ですが、1つめのセルを固定幅にしたいためNo.的な見せ方のコンテンツにしています。

<table>
  <tr>
    <th>No.</th>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>01</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
  <tr>
    <td>02</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
  <tr>
    <td>o3</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
  <tr>
    <td>o4</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
  <tr>
    <td>o5</td>
    <td>サンプル</td>
    <td>サンプルサンプル</td>
    <td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</td>
  </tr>
</table>

table {
  width: 100%;
  table-layout: fixed;
}

table th:first-of-type{
  width: 100px;
}

このように、最初のNo.のセルだけ100pxになり、他は均等割で表示されます。サイズを指定する場合は、1つのセルに指定すれば、tableタグの特徴でそれ以降の行のサイズも同じサイズに統一されます。

例えば、下記のように2つ目のセルもサイズを指定した場合は、1つめのセル、2つめのセルは指定したサイズで表示されて、3つめと4つめの残りのセルがそれぞれ均等割されるという形になります。

table {
  width: 100%;
  table-layout: fixed;
}

table th:first-of-type{
  width: 80px;
}

table th:nth-of-type(2){
  width: 80px;
}

このように、1つめと2つめだけ80pxの指定したサイズで表示され、残り2つは均等割されたサイズで表示されます。

table-layout: fixed; が反映されない時の対処法

非常に簡単に使えて役立つtable-layout: fixed;ですが、設定しても反映されない時があります。

自分でもコードを書いていて、table-layout: fixed;を設定したにも関わらず、各セルのサイズが均等割されておらず「なんでだろう？」と思う事がありますが、その場合はほとんどのケースにおいてこのためです。

その対処法を最後に挙げておきます。

tableにwidthの指定をする

結論はこれです。
tableにサイズを指定しておく必要があります。

table{ width: 100%; }
table{ width: 600px; }

などのように、必ずそのtableにはサイズ指定が必要になります。
これは考えてみれば当然の話で、均等割にするという事は基準となるサイズが必要で、サイズが無ければ何を基準に均等割にすれば良いかがわからなくなってしまいます。

300pxを均等割にして3つで表示してください。なら誰でも解けますが、サイズ指定がなく、3つに均等割に表示してください。と言われたら、当然いやいや、サイズは？となるのと同じですね。

テーブル全体の幅の指定をするのを忘れないようにしましょう。

まとめ

テーブルの各セルのサイズの設定について見て来ました。
以前であれば、4列なら100/4、3列なら100/3といった設定をしていた事もあるかもしれませんが、今は今回紹介したtable-layoutを使う事で解決します。

解除したい場合はfixedをautoに戻すだけで通常に戻せるため非常に使い勝手も良いですし個人的にはデフォルトをこれにしておいて良いのでは無いかとも思う程です。

全部を均等割という使い方もできますし、特定のセルだけは○pxで他を均等割といった使い方など、非常に使い勝手が良いため、色々な表組みをHTMLタグで表示する際に活用できるので、使い方を覚えておいて損は無いタグではないかなと思います。