テーブルを固定したい場合の例です。
まだ完璧ではありませんが・・・
| aaaa | bb | cccc | dddd | eeeee |
|---|---|---|---|---|
| vvvvvvvvvvv | ww | xxxx | yyyy | zzzzzzzzzzzzzzzzzzzz |
<table>
<tr>
<th>aaaa</th>
<th>bb</th>
<th>cccc</th>
<th>dddd</th>
<th class="fixed">eeeee</th>
</tr>
<tr>
<td>vvvvvvvvvvv</td>
<td>ww</td>
<td>xxxx</td>
<td>yyyy</td>
<td>zzzzzzzzzzzzzzzzzzzz</td>
</tr>
</table>
table {
table-layout: fixed;
word-wrap: break-word;
width:300px;
}
table,th,td {
border: 1px solid #bbb;
}
.fixed {
width:100px;
}
テーブル幅は300px
固定したセルeeeee幅100px
table-layout: fixedでテーブル幅は固定できた。
word-wrap: break-word;で半角英文字がセルを突き抜ける問題はなくなった。
