width指定したTDでwhite-space:nowrapが効かない

width指定したTDでwhite-space:nowrapが効かない

ブラウザはIE6～8のみを想定しています。
下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。
列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、
どのようにすれば自動改行を禁止できるでしょうか。


<table style="table-layout: fixed;">
<tr>
<td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td>
<td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td>
</tr>
<tr>
<td style="overflow: hidden; white-space: nowrap;">あああああああ</td>
<td style="overflow: hidden; white-space: nowrap;">あああああああ</td>
</tr>
</table>

No.1 ベストアンサー 回答者： yambejp 回答日時： 2010/10/19 10:53

tdに対してoverflowが有効かどうかはブラウザの解釈次第ですね

divに対しては比較的適用されているようなのでtdの中にdivを設置するのがよいかと

<style>
table{table-layout: fixed;}
td div{
width: 50px;
overflow: hidden;
white-space: nowrap;
}
</style>
<table>
<tr>
<td><div>あああああああ</div></td>
<td>あああああああ</td>
</tr>
<tr>
<td><div>あああああああ</div></td>
<td>あああああああ</td>
</tr>
</table>

この回答へのお礼

回答ありがとうございます。
そもそもTDに対するoverflowがダメだったんですね。
ありがとうございました。

お礼日時：2010/10/19 14:40