我有一个包含3个“列组”列的HTML表格，左侧，中间和右侧。
+----------------------------------+ | L-1 | L-2 | M | R1 | R2 | +-----+-----+------------+----+----+ | x | z | aaaaaaa... | 1 | 2 | | y | w | bbbbbbb... | 3 | 4 | +-----+-----+------------+----+----+
当中间（“M”）列中有一个很长的字符串时，我想将表格限制在浏览器窗口的宽度上。
我尝试在此列上使用CSS word-break，如wordwrap a very long string中所述。
下面是HTML（示例）。 CSS包含了我对这应该如何（但显然不起作用）的想法。
我做错了什么？
<html>
<head>
<style type='text/css'>
table { /* nothing here - table is block, so should auto expand to as large as it can get without causing scrollbars? */ }
.left { text-align:center; }
.right { text-align:right; }
.middle { text-align:left; width:100%; /* expand this column to as large as it can get within table? */}
.wrap { word-wrap:break-word; width:100%; /* use up entire cell this div is contained in? */ }
</style>
</head>
<body>
<table>
<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>argle</td>
<td class=left>bargle</td>
<td class=middle><div class=wrap>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
<td class=right>glyp</td>
<td class=right>glof</td>
</tr>
</table>
</body>
</html>
现在的结果是没有自动换行，而是表格不必要地射向最右边并在浏览器窗口中生成一个滚动条。
答案 0 :(得分：1)
这似乎完美无缺：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
th,td { vertical-align:top; padding:0 5px; }
.left { text-align:center; }
.right { text-align:right; }
.middle { text-align:left; width:100%; }
</style>
</head>
<body>
<table>
<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>argle</td>
<td class=left>bargle</td>
<td class=middle>w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​</td>
<td class=right>glyp</td>
<td class=right>glof</td>
</tr>
</table>
</body>
</html>
上面的技巧是不时地插入一个不可见的空格（​）。
我讨厌回答我自己的问题，所以在结束之前我会等一些人提出更漂亮的东西。
答案 1 :(得分：0)
相关变化：
table { table-layout:fixed }。width="100%"添加到您的table。div，并将.wrap课程添加到td课程.middle。width=100属性添加到其他列。完整HTML：
<html>
<head>
<style type='text/css'>
table { table-layout:fixed; /* nothing here - table is block, so should auto expand to as large as it can get without causing scrollbars? */ }
.left { text-align:center; }
.right { text-align:right; }
.middle { text-align:left; /* expand this column to as large as it can get within table? */}
.wrap { word-wrap:break-word; /* use up entire cell this div is contained in? */ }
</style>
</head>
<body>
<table width="100%">
<tr>
<th class=left width=100>L-1</th>
<th class=left width=100>L-2</th>
<th class=middle>M</th>
<th class=right width=100>R-1</th>
<th class=right width=100>R-2</th>
</tr>
<tr>
<td class=left>argle</td>
<td class=left>bargle</td>
<td class="middle wrap">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
<td class=right>glyp</td>
<td class=right>glof</td>
</tr>
</table>
</body>
</html>
答案 2 :(得分：0)
乍一看这是有效的：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
td { vertical-align:top; }
.left { text-align:center; }
.right { text-align:right; }
.middle,
.middle iframe { width:100%; }
</style>
</head>
<body>
<table>
<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>argle</td>
<td class=left>bargle</td>
<td class=middle><iframe style='border:0' src='data:text/html,%3Cbody style=%22margin:0;word-wrap:break-word%22%3Ewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww%3C/body%3E'></iframe></td>
<td class=right>glyp</td>
<td class=right>glof</td>
</tr>
</table>
</body>
</html>
但是当你添加另一行时会中断，因为嵌入的iframe有静态高度。