ページ

2010-10-28

XHTML+CSSでテーブルの列均等割付

悩んでちょっと調べ物をしましたので、メモを。

HTMLのテーブルで列の均等割付を行なう場合、以前ですとthなりtdで「width="30%"」とかしていましたが、XHTMLでは規格違反になります。で仕様に従った形で列の均等割付を行なうにはどうしたらいいのか調べたのですが、日本語ページでは適当なものが見つからず、googleの英語翻訳検索をかけたところ「How to ensure equal width columns on a dynamically generated table」で手頃な対応法が出ていました。

ここに記載されていた方法は列数が動的に変化するような場合の対処ですが、固定数の場合にはずっとシンプルになります。例えば3列のテーブルでしたら、
table.threecol th,td {
  width: 30%; 
}
というCSSを定義して、XHTML側でテーブルに class="threecol" を付加するだけです。見つけてみればあたりまえの手法ですが、自分だけではちょっと出てきませんでした。ひとつ利口になりました。

0 件のコメント:

コメントを投稿