【问题标题】：Width of a <td> is narrower when I use a <br> in it on a fixed width <table>. Why?当我在固定宽度 <table> 上使用 <br> 时，<td> 的宽度会变窄。为什么？
【发布时间】：2010-09-28 12:21:59
【问题描述】：

我有这个 HTML 代码片段（在使用严格 doctype 的有效文档中）：

<p>Without &lt;br /&gt;</p>
<table border="1" width="220">
<tbody>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>lorem ipsum</td>
        <td>lorem</td>
        <td>ipsum</td>
    </tr>
</tbody>
</table>

<p>With &lt;br /&gt;</p>
<table border="1" width="220">
<tbody>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>lorem<br>ipsum</td>
        <td>lorem</td>
        <td>ipsum</td>
    </tr>
</tbody>
</table>

在任何浏览器中都是这样呈现的：

请注意，第一个表中的第三个

更宽，只是因为我没有在那里使用
标记。否则这两个表的代码是相同的。

我想找到一种方法让表格像第二个示例一样呈现，但不必使用
标记。

澄清

我无法指定单元格的宽度，因为它们可能包含任意数量的字符。

【问题讨论】：

这些可能是出了名的尴尬。即使有非常精确的样式，桌子似乎仍然经常有自己的想法。
当您使用默认的‘auto table layout’ algorithm 时，您完全受制于浏览器如何选择分配“备用”表格宽度。对此没有一种标准算法（CSS2 规范中的算法是“非规范的”），并且浏览器会做不同的事情； IE 尤其会做一些奇怪的事情。对不起。如果你想要真正可靠渲染，唯一的出路是table-layout: fixed。
实际上table-layout: fixed 使 IE 中的一切变得更糟，即使在 IE8 中也是如此，而它在其他浏览器中有所帮助。到目前为止，似乎没有<br> 标签是无法完成的。

标签： html line-breaks

【解决方案1】：

似乎这是一个古老的问题/问题 - 不幸的是，我没有解决方案来提供 2005 年的这个链接，这证明即使在那时就已经有人在努力解决这个问题了。 :)

http://www.velocityreviews.com/forums/t162343-how-to-prevent-unnecessary-table-resizing.html

【讨论】：

【解决方案2】：

您已将表格元素的宽度设置为固定，但未设置 TD 的宽度。

两个表格的宽度肯定相同，但每个 TD 的相对宽度会根据其内容而变化。

要让您的 TD 具有相同的宽度，您可以将其宽度设置为一个百分比（五列中的每一列都为 20%）：

<table border="1" width="220">
<tbody>
    <tr>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
        <td width="20%">lorem ipsum</td>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
    </tr>
</tbody>
</table>

我已经在我的浏览器 (Firefox) 上检查了它，它可以运行。

【讨论】：

这将每个单元格的宽度定义为相等。我不能这样做，单元格可以有任意内容。不过感谢您的提示。
@Wabbitseason：那么，我没有解开你的问题：你想让你的单元格大小相等，还是要设置固定宽度，或者你想让 TDs 宽度为动态设置？
我不想对 TD 做任何事情。我想要的只是避免使用
标签。在被渲染后，它会自动将最宽的单元格的内容分成多行，但是如果我不使用
，浏览器（可能）会错误地计算这些单元格的宽度。

好的。但这并不是说他们没有做错任何事情：他们根据每列的内容设置相对宽度，正如他们应该做的那样。

我感觉这可能是一个错误而不是一个功能。似乎单元格的宽度是用应该自动替换为换行符（应该没有宽度）的空格字符计算的。

【解决方案3】：

尝试为

指定宽度。

【讨论】：

我不能。单元格可以包含任何字符串。
对不起，这不是一个选项。我已对问题进行了澄清。

【解决方案4】：

我在 Firefox 上试过你的表，我怀疑左边框和字符串 Lorem Ipsum 之间没有空格。当单词 ipsum 换行到下一行时，唯一的空格在右侧（右边框和字符串之间）。请看一下我附上的图片，以便更清楚地了解我在说什么。

这是因为“Lorem”这个词与“ipsum”这个词被一个空格隔开，当发生换行时，浏览器会保留这个空格，也称为空白。仅依赖 html 和 css 我不认为存在一个包装上下文，浏览器会在包装时忽略空格。您将不得不使用它或在 javascript 中编写一个函数来操作字符串并消除空格（或将其替换为
。对于屏幕截图左侧的空间，请尝试修改您的代码并看到没有多余的边距或填充迫使这个空白空间。

【讨论】：

【解决方案5】：

如果您追求空白美学，您可以在td 中添加一些小填充（2px 或 3px），例如：

td {
  padding: 3px;
}

这应该有助于单元格在空白方面看起来更均匀。

【讨论】：

【解决方案6】：

<table border="1" width="220">
<tbody>
    <tr>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
        <td width="20%; overflow:hidden; wordspace:break; word-spacing:10px;">lorem ipsum</td>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
    </tr>
</tbody>

【讨论】：