cssで文字数に関係なく、表の列幅を均等にする方法

今回は「CSSで文字数に関係なく、表の各列幅を均等にする方法」をご紹介します。

CSSを使わないでHTMLで表を作った場合、大抵は下のような感じになると思います。

列の幅がばらばらですよね。
文字列の長さで列幅が決まってしまいます。

そこでCSSの出番なのですが、ぱっと思いつく方法は全ての列に列幅を指定する方法です。
ですが、この方法では列が増えた時は、場合によっては列幅を指定し直さないといけません。（列が多くなりすぎて、列幅を狭くしなければいけなくなった時とか）

そんな時はスタイルシートのtable-layout（テーブル レイアウト）プロパティを使ってみましょう。
（下がtable-layoutプロパティを使った例です。）

これであれば、どの列でも幅が均等になります。
さらに列数が増減したら、それに合わせて列幅も変わってくれます。

気になるCSSのソースはこんな感じになります。

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

ブログに使う表なんかにこのソースを仕込んでおくと、表が使いやすくなるんじゃないでしょうか。