【ホームページ作成】文字数に関係なく、表の各列幅を均等にする

表のセル幅（列幅）を均等配分させたい

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

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

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

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

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

今回は、セル（列）の横幅を均等配分させる方法をご紹介いたします。

表のセル幅（列幅）を均等配分させる例

■全部のセル幅（列幅）を均等にする：

セル内の文字数に関係なく、すべての幅を均等にすることができます。

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

■見出し列だけサイズを指定し、残りを均等配分させる：

均等に配分したい場合でも、「見出し」などの特定の列だけは均等でなくて構わないということもあります。
その場合は、「特定の列だけ指定の横幅」で表示し、残ったスペースを「残りの列で均等に配分」させられます。

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

上図の場合は、左端にある「見出し」列だけ狭く指定されており、残りの列（右側3つ）の幅は均等配分されています。
横幅を指定しているのは、左端の「見出し」列だけです。
※左端の列幅は、「 width: 1.8em 」と指定しているため、縦向きに表示されます。（1行に1.8文字分のスペースしかないので、実質は1行1文字になるため。）

table-layoutプロパティ

上記のように各セル幅（列幅）を均等に配分させるには、スタイルシートの「table-layout」（テーブル・レイアウト）プロパティを使います。
このプロパティを1行記述しておくだけで、簡単に均等配分させられます。
具体的な記述方法は、次のページで。