テーブルを使っていると列の幅の指定に悩むことがあるんですよね。
最近も列幅を均等にしたいけどやり方が分からなくてかなり悩みました。
ですがその方法が分かったのでCSSで各列の幅を均等にする方法を紹介します。
テーブルの列幅はtd要素の最大幅で決まる
まずテーブルで列幅を均等にしようとしたときに理解しないといけないことがあります。
それはテーブルは各列の最大幅を一番大きいtd要素に合わせるということ
例えば次のようなテーブルがあるとしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table border="1" style="width: 300px;"> <tr> <td>AB</td> <td>ABCDEFAB</td> <td>AB</td> </tr> <tr> <td>ABCD</td> <td>ABCD</td> <td>AB</td> </tr> </table> |
こういうテーブルがあった場合、各列のtd要素で一番大きい幅がその列全体の幅になります。
実際にどういう風に見えるかは次のCodePenを見てください。
See the Pen 【CSS】各列の幅がばらばらのテーブル by ぴー助 (@pisuke-code) on CodePen.
２列目を見ると列の最大幅がtd要素の最大幅で決まっていることが分かりやすいと思います。
つまりテーブルは自動的にtd要素から列幅を計算する仕組みになっているということです。
これ自体は便利な機能ですが、列幅を均等にしたいときは少し不便
じゃあどうすれば簡単に均等にできるかというとCSSのあるプロパティを使います。
列幅を簡単に均等にするには
その方法はテーブルに対してtable-layoutプロパティを指定することです。
このプロパティの値を fixed にすることでテーブル幅が固定されて列幅も均等になります。
例えば次のようなテーブルを作成したとしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table class="equal_table" border="1"> <tr> <td>AB</td> <td>ABCDEFAB</td> <td>AB</td> </tr> <tr> <td>ABCD</td> <td>ABCD</td> <td>AB</td> </tr> </table> |
equal_table というクラス名を持つテーブルです。
この幅を固定するには次のようなCSSを書けばOK
|
1 2 3 4 |
.equal_table{ table-layout: fixed; width: 300px; } |
上の例だとテーブル幅は300pxで常に固定されて表示されます。
実際にどのようなテーブルになるかのサンプルが次のCodePen
See the Pen 【CSS】各列の幅が均等のテーブル by ぴー助 (@pisuke-code) on CodePen.
300pxの幅に収まるように列幅は全て100pxに固定されています。
ちなみに次のサイトの説明によると table-layout: fixed; を使うと若干表示速度も速くなるそうです。
table-layout:fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、表示が速くなるメリットがあります。
まあ表示が速くなると言っても誤差程度だとは思いますが・・・笑
ただ無駄な計算がなくなるので表示項目が多いテーブルなら少しは効果はあるかもしれません。
テーブル幅が固定だと困ること
ここまでで紹介したのがテーブル幅を固定して列幅を均等にする方法です。
ですがテーブル幅を固定してしまうと別のトラブルが出てきます。
それは列幅が固定されることで文字列がはみ出してしまうことがある、ということ
例えば次のCodePenを見てください。
See the Pen 【CSS】テーブル内のテキストがはみ出てしまう例 by ぴー助 (@pisuke-code) on CodePen.
よく見てみると１行目２列目の要素のテキストがはみ出てしまっています。
これは列幅が固定なのに、td要素にそれ以上に長いテキストが設定されているからです。
ではこの問題はどう対処すればいいかですが、その解決策は次の記事に書きました。
もしテーブルで文字列がはみ出る、という場合はこの記事で紹介した方法で回避可能です。
ここまでのまとめ
ということでテーブルの列幅を均等にするならtable-layoutを使おうよという話でした。
テーブルは列幅を勝手に計算してしまうので、それが均等にならない原因になっているようです。
便利なプロパティなのでテーブルを固定幅にできる場面では使っていこうと思います。
ではでは･△･)ﾉ ﾊﾞｲﾊﾞｲ
