テーブルの中で、ある列の最初のセルの幅を100px
に設定しています。
しかし、この列のいずれかのセルのテキストが長すぎると、列の幅が100px
を超えてしまいます。この拡張を無効にするにはどうしたらよいでしょうか。
悩みに悩んで少しだけ遊んでみました。
セルの幅を設定し(th
かtd
のどちらかが有効で、私は両方を設定しました)、table-layout
をfixed
に設定する必要があります。何らかの理由で、テーブルの幅が設定されている場合にのみ、セルの幅が固定されるようです(馬鹿げていると思いますが、仕方ありません)。
また、overflow
プロパティを hidden
に設定すると、テーブルから余分なテキストが出てくるのを防ぐことができて便利です。
枠線やサイズの調整もすべてCSSに任せるようにしてください。
OK、では私が持っているものは以下の通りです。
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
[JSFiddleではこうなっています][1].
この人も同じような問題を抱えていました。 https://stackoverflow.com/q/446624/534056
対応するCSS内に以下を記述する必要があります。
table-layout:fixed;