左、中央、右の 3 つの「グループ」列を持つ HTML テーブルがあります。
+---------------------------------+ | | L-1 | L-2 | み | R1 | R2 | +-----+-----+------------+----+----+ | | × | z | ああああああ... | 1 | 2 | | | y | w | ブブブブ... | 3 | 4 | +-----+-----+------------+----+----+
中央 ("M") 列に非常に長い文字列がある場合、テーブルをブラウザー ウィンドウの幅に制限したいと思います。
wordwrap a very long stringで説明されているように、このコラムで CSS word-break を使用しようとしました。
以下はHTMLです（例示）。CSS には、これがどのように機能するか (ただし、機能しないようです) に関する私の考えが含まれています。
私は何を間違っていますか？
<html>
<頭>
<style type='text/css'>
table { /* ここには何もありません - テーブルはブロックなので、スクロールバーを発生させずにできるだけ大きく自動拡張する必要がありますか? */}
.left { text-align:center; }
.right { text-align:right; }
.middle { text-align:left; 幅:100%; /* この列をテーブル内に収まる最大サイズまで拡張しますか? */}
.wrap { word-wrap:break-word; 幅:100%; /* この div が含まれているセル全体を使用しますか? */}
</style>
</head>
<本体>
<テーブル>
<tr>
<th class=left>L-1</th>
<th class=left>L-2</th>
<th class=middle>M</th>
<th class=right>R-1</th>
<th class=right>R-2</th>
</tr>
<tr>
<td class=left>議論</td>
<td class=left>バーグル</td>
<td class=middle><div class=wrap>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
<td class=right>グリプ</td>
<td class=right>グロフ</td>
</tr>
</表>
</body>
</html>
その結果、ワード ラップは行われず、代わりにテーブルが不必要に右端に飛び出し、ブラウザー ウィンドウにスクロールバーが表示されます。