使用CSS强制<tr>高度

Question

我需要控制一个表行的高度 - 我已经尝试设置单元格的高度,但我正在撞砖墙.见演示.

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;.

请参阅MDN上的CSS溢出

出于这个原因,我相信你将不能够达到一定的高度,除非你设置display: block;上<td>的S -你说你不能因为它会破坏表比对,所以唯一明智的选择是,在我看来:

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

你<span>设置为display: block;(不真正发挥作用有一个跨度设置为阻止,而不是一个div,除了事实,div将打破HTML验证,而跨度不会-块元素中不允许td元素)

这是我能想到的最优雅,最有效的方式.