HTMLテーブルのセル幅を制御するパート１
HTMLテーブルのセル幅の制御方法には、大きく分けて『auto』と『fixed』の２つのモードがあります。
モードは、CSSのtable-layoutプロパティで『auto』か『fixed』を指定します。
『auto』は、セル幅をブラウザが自動的にレンダリングしてくれます。
『fixed』は、セル幅をth要素やcol要素のwidth属性で指定します。
列数が多い（たとえば20以上）場合、『auto』にすると、th要素やcol要素のwidth属性をいくら指定しても無効になります。
列数が少ない場合は、変な割合でwidthが効きます。
つぎに、『fixed』にするとwidthは、列数に関係なく有効になりますが、長いスペルの英語（半角文字）がセル内にすべて表示されない場合があります。
では、widthが列数に関係なく有効で、長いスペルの英語（半角文字）がすべて表示されるようにするには、どうしたらよいでしょうか？
この場合は、th要素にnowrap属性を指定します。
なぜか上手く行くのです。
あたかも、『auto』と『fixed』の折衷モードみたいになるのです。
しかし、IE系だけかも（実際、Firefoxの『auto』では、nowrapしてもwidthが効かない）。
サンプル
<html> <body> <table border="1" style="table-layout: auto"> <col span="1" width="50px"> <col span="1" width="60px"> <col span="1" width="70px"> <col span="1" width="80px"> <col span="1" width="90px"> <col span="1" width="50px"> <col span="1" width="60px"> <col span="1" width="70px"> <col span="1" width="80px"> <col span="1" width="90px"> <caption>サンプル</caption> <thead> <tr> <th nowrap>見出し１</th> <th nowrap>見出し２</th> <th nowrap>見出し３</th> <th nowrap>見出し４</th> <th nowrap>見出し５</th> <th nowrap>見出し６</th> <th nowrap>見出し７</th> <th nowrap>見出し８</th> <th nowrap>見出し９</th> <th nowrap>見出し１０</th> </tr> </thead> <tbody> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>データ２</td> <td>データ３</td> <td>データ４</td> <td>データ５</td> <td>データ６</td> <td>データ７</td> <td>データ８</td> <td>データ９</td> <td>データ１０</td> </tr> </tbody> </table> </body> </html>
