如何将表格中的一列换行，表格大小适合浏览器窗口
Posted
技术标签:
【中文标题】如何将表格中的一列换行，表格大小适合浏览器窗口【英文标题】：How to word-wrap one column in a table, with table sized to browser window 【发布时间】：2011-06-05 21:01:16 【问题描述】：我有一个 html 表格，其中包含 3 个“组”列，左、中和右。
+---------------------------------+ | L-1 | L-2 |中号 | R1 | R2 | +-----+-----+------------+----+----+ | x | z |啊啊啊... | 1 | 2 | |是 | w | bbbbbbb... | 3 | 4 | +-----+-----+------------+----+----+当中间（“M”）列中有一个很长的字符串时，我想将表格限制在浏览器窗口的宽度内。
如wordwrap a very long string 中所述，我尝试在此专栏中使用 CSS 分词。
以下是 HTML（示例）。 CSS 包含我对这应该如何（但显然不是）工作的想法。
我做错了什么？
table /* 这里什么都没有 - 表是块的，所以应该自动扩展到尽可能大而不引起滚动条吗？ */ .left 文本对齐：中心； .right 文本对齐：右； .middle 文本对齐：左；宽度：100%； /* 将此列扩展到表中最大的大小？ */ .wrap word-wrap:break-word;宽度：100%； /* 用完这个 div 所在的整个单元格？ */这似乎完美无缺：
<!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>
上面的技巧是不时插入一个不可见的空白 (&#x200b;)。
不过，我讨厌回答自己的问题，所以我会等待有人提出更漂亮的东西，然后再结束。
【讨论】：
【参考方案2】：相关更改：
已将table table-layout:fixed 添加到您的 CSS。
已将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 >
<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>
【讨论】：
感谢您的尝试！不太好用，L 和 R 列包含用户输入，因此我无法将它们固定为 100 像素。【参考方案3】：乍一看这很有效：
<!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 具有静态高度。
【讨论】：
以上是关于如何将表格中的一列换行，表格大小适合浏览器窗口的主要内容，如果未能解决你的问题，请参考以下文章