具有两行文本的表格行答案

【问题标题】：Table rows with two lines of text具有两行文本的表格行
【发布时间】：2016-09-28 02:38:42
【问题描述】：

我有两张并排的桌子。我需要将行对齐，但有时由于页面上的宽度限制，内容可能比表格行长，它会中断并形成两行表格行。

是否可以制作像双行这样可以容纳两行文本的东西，这样无论内容是 1 行还是 2 行，所有内容都排成一行？

【问题讨论】：

【解决方案1】：

您可以解决这两种方法，一种是按照您的建议创建具有固定高度的行，另一种解决方案是创建一个有 3 列的大表格，您可以在其中删除中间列的边框，使其看起来像2 张桌子。

您要求的解决方案可能如下：

<style>
td { vertical-align: top; }
td div { height: 40px; overflow: hidden; }
</style>
<table width="400">
  <tr>
    <td><div>short content</div></td>
    <td><div>long content long content long content long content</div></td>
    <td><div>long content long content long content long content</div></td>
  </tr>
  <tr>
    <td><div>long content long content long content long content</div></td>
    <td><div>short content</div></td>
    <td><div>long content long content long content long content</div></td>
  </tr>
</table>

【讨论】：

+1，使用一个大表结合两个小表是最可靠的方法。

【解决方案2】：

您可以为表格行或单元格添加一个（最小）高度（尽管它在 IE6 等旧浏览器中不起作用），如下所示：

tr {
   min-height: 2em;
}

或

tr {
   min-height: 24px;
}

如果您需要它在 IE6 中同样工作，您可以添加 'height: ...' 代替。

希望这会有所帮助！

【讨论】：

您可以使用 min-height 快速破解来解决 IE6 问题：dustindiaz.com/min-height-fast-hack
-1，因为如果在某个时候你得到 3 行，它会再次中断。使用另一个答案中建议的一张大表更可靠。
请求是针对两行的——我看不出“溢出隐藏”是一个更好的解决方案，因为它会隐藏文本，从而以更糟糕的方式破坏用户。此外，我尝试保持 html 的结构相同，因为更改它并不总是那么容易。它可能会“更好”，但并不总是可以做到。我相信这种解决方案的侵入性较小。

【解决方案3】：

给出 TD 高度：2.5em 左右（您必须使用这个值，取决于您使用的其他参数，例如边距/填充/行高。

【讨论】：