使用 CSS 强制 <tr> 高度

Question

我需要控制表格行的高度——我已经尝试设置单元格的高度，但我遇到了一堵砖墙。 See demo.

tr.fixedRow,
tr.fixedRow td.fixedCell {
     height: 50px;
     overflow: hidden; }

我知道我可以将某些东西的display 更改为block，但这样做通常会以一种糟糕的方式弄乱桌子——我正在使用一个相当复杂的桌子，它与附近的其他桌子交互并且需要完美地排列像素，所以一般来说，更改display 然后尝试使用 CSS 再次使其看起来像一个表格对我来说不是一个好的解决方案，因为它不会匹配。我需要它来留一张桌子。

我也想避免这样做：

<td><div>
   ... cell content...
</div></td>

这看起来很糟糕。这么简单的事情肯定只有 CSS 解决方案吗？

Answer 1

您试图通过依赖一个无法按您期望的方式工作的 css 属性来实现这一点：CSS 溢出适用于块级元素，<td> 不是（css：display: table-cell;）。

见CSS Overflow on MDN

出于这个原因，我相信您将无法达到固定高度，除非您在 <td>s 上设置 display: block; - 而且您说您不能因为它会破坏表格对齐，所以唯一明智的在我看来，替代方案是：

<td><span>...</span></td>

将您的 <span> 设置为 display: block; （除了 div 会破坏 html 验证之外，将 span 设置为阻止而不是 div 并没有真正的区别，而span 不会 - td 元素中不允许使用块元素）

这是我能想到的最优雅、最有效的方式。