css - 使用 CSS 强制 高度

Question

我需要控制表格行的高度——我曾尝试设置单元格的高度，但我遇到了困难。 See demo .

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

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

我也想避免这样做:

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

这看起来很糟糕。对于如此简单的事情，肯定有仅 CSS 的解决方案吗？

Answer 1

您正试图通过依赖一个不能按您预期的方式工作的 css 属性来实现此目的:CSS 溢出适用于 block 级元素，某事 <td>不是(css:display: table-cell;)。

参见 CSS Overflow on MDN

因此，我相信除非您设置 display: block;，否则您将无法实现固定高度。在 <td> s - 你说你不能因为它会破坏表格对齐方式，所以在我看来，唯一明智的选择是:

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

用你的<span>设置为 display: block; (除了 div 会破坏 html 验证而 span 不会 - td 中不允许 block 元素之外，将 span 设置为 block 而不是 div 并没有真正的区别。元素)

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