小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁(コイケヒロヒト)の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

HTMLテーブルのセル幅を制御するパート2

昨日、『HTMLテーブルのセル幅を制御するパート1』で、fixedモードでは『長いスペルの英語(半角文字)がセル内にすべて表示されない』と申し上げましたが・・・。
実は、fixedモードでもCSSで『word-wrap: break-word』を指定するとすべて表示されます。ちなみに、IE系のみです。

<html>
<body>
<table border="1" style="table-layout: fixed; word-wrap: break-word">
<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>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
<th>見出し4</th>
<th>見出し5</th>
<th>見出し6</th>
<th>見出し7</th>
<th>見出し8</th>
<th>見出し9</th>
<th>見出し10</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>データ2</td>
<td>データ3</td>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
<td>データ7</td>
<td>データ8</td>
<td>データ9</td>
<td>データ10</td>
</tr>
</tbody>
</table>
</body>
</html>