table要素で作成した表のセル幅(列幅)を均等配分したい

table要素を使って表を作ると、セルの内容量(文字数など)に応じて自動的に列の横幅が決定されます。便利な仕様ではありますが、ある特定の列だけ極端に文字数が少ない場合には、全体的にバランスの悪い表になってしまうこともあります。

文字数に応じて列幅が自動決定される

文字数に応じて列幅が自動決定される


上図のように、セルの内容量(文字数)が一定ではない場合には、列の幅がバラバラになってしまいます。セルの横幅(列幅)を均等にしたい場合は、このように自動調整されると困ります。

1列ずつ横幅を数値で指定する方法は面倒
面倒!

面倒!

全ての列の横幅を数値で指定すれば、均等に配分して表示させることも可能です。しかし、列数が多い場合には計算や指定が面倒です。また、計算したとしてもぴったり割り切れない場合もあり、配分を考えるのに手間がかかります。

そこで便利なのが、「table-layout」プロパティです。


 
たった1行の記述で、すべての列幅を均等にできる楽な方法がある!
簡単!

簡単!

CSSの「table-layout」(テーブルレイアウト)プロパティを使えば、各セルの横幅(列幅)を数値で直接指定しなくても、列の幅を均等に配分させられます。自分で割り算する必要もなければ、各列に指定を加える必要もありません。table要素に対して1行のスタイルを記述するだけなので、とても簡単です。


 
今回は、この「table-layout」プロパティを使って、table要素で作成した表の列幅を均等にする方法をご紹介致します。

table(表)のセル幅(列幅)を均等配分させる例

今回ご紹介する方法では、表内のすべての列を同じ横幅にすることもできますし、特定の列だけに横幅を指定しておき、残った列を同じ横幅になるよう均等配分することもできます。具体的な記述方法を解説する前に、その表示例を2つご紹介しておきます。

(1) 全部のセル幅(列幅)を均等にする:
セル内の文字数に関係なく、表内のすべての列幅を均等にすることができます。

文字数に関係なく全列の列幅を均等に配分する

文字数に関係なく全列の列幅を均等に配分する


(2) 特定の列にだけ横幅を指定し、残りを均等配分させる:
「見出し」などの特別な列だけは均等にせずに横幅を直接指定したい、という場合もあるでしょう。その場合は、その「特定の列だけに横幅を数値で指定」しておき、残った空間を「残りの列で均等に配分」させることもできます。

特定の列にだけ横幅を指定し、残りを均等に配分する

特定の列にだけ横幅を指定し、残りを均等に配分する


上図の場合は、左端にある「見出し」列だけが狭く指定されており、残りの列(右側3つ)の幅は均等配分されています。ここで横幅を指定しているのは、左端の「見出し」列だけです。

※ここでの左端の列(最初のセル)には、「width: 1.8em」というスタイルを指定しています。そのため、中身の文字は縦向きに表示されます(1行に1.8文字分のスペースしかないので、実質は1行1文字になるため)。

table(表)のレイアウト方法を指定する、table-layoutプロパティ

上記でご紹介したように、各セルの幅(列幅)を均等に配分させるには、スタイルシートの「table-layout」(テーブル・レイアウト)プロパティを使います。このプロパティを1行記述しておくだけで、簡単に列幅を均等配分させられます。

それでは次のページで、table-layoutプロパティの記述方法を見ていきましょう