実録！ホームページ制作者の声

tableタグ関連のプロパティは使えるものが多く、あれこれと工夫すれば見やすくスッキリした表を制作することができます。今回は私がよく使うwhite-space:nowrap;を紹介します。見て見当がつくように、HTMLでのnowrap="nowrap"をスタイルシートで設定したものです。

クロスブラウザを考えたとき、フォントサイズの違いが問題になります。

「こっちのブラウザでは1行でまとまったのに、違うブラウザでは改行されてしまった…」

ということはよくあります。表組みをする際に、幅を指定しなければ文字数によって幅が変わってしまうので、表示文字との兼ね合い意外と難しいものです。そこでwhite-space:nowrap;です。

HTMLサンプル =========================================
<table>
   <tr>
     <th>見出しテキスト</th>
     <td>テキスト</td>
   </tr>
</table>

CSSサンプル =========================================
table{
width:100%;
}
th{
width:1%;
white-space:nowrap;
}

こんな風に設定すれば見出しテキストは改行されず、尚且つセルの幅も最少で済みます。tdに対しては幅の設定はなしで、thの最小幅の差分を有効に活用できる仕組みです。

ピクセル指定などで幅をガチガチに決めない方法なので、ブラウザごとにフォントサイズが違っても全く問題ありません。クロスブラウザも万全というわけです。また、幅を固定していないので、paddingを使った余白設定もＯＫです。多少の余白がほしければpadding:0 5px;のように設定してもいいでしょう。

どうでしょうか。フルCSSレイアウトもいいですが、テーブルもいいでしょう。