力< tr> CSS高度 [英] Force <tr> height with CSS

问题描述

我需要控制表格行的高度-我已经尝试设置单元格的高度，但是我碰到了砖墙。 参见演示。

I need to control the height of a table row--I have tried setting the height of the cells, but I'm hitting a brick wall. See demo.

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

我知道我可以更改显示进行 block 的某些操作，但是这样做通常会以一种不好的方式弄乱表-我正在处理一个相当复杂的表，该表与附近的其他表进行交互并需要以便完美地对齐像素，因此通常来说，更改 display 并尝试使用CSS使其再次看起来像一张表对我来说不是一个好的解决方案，因为它不会匹配。我需要它留在桌子上。

I know that I could change the display of some things to block but doing so generally messes up the table in a bad way--I'm working with a rather complicated table that interacts with other tables nearby and needs to line up pixel-perfectly, so generally, changing the display and then trying to make it look like a table again with CSS isn't a good solution for me, because it won't match up. I need it to stay a table.

我也想避免这样做：

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

这似乎是可怕的形式。当然，只有CSS这样简单的解决方案吗？

Which seems like terrible form. Surely there is a CSS only solution to something so simple?

推荐答案

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

You are trying to achieve this by relying on a css property that does not work the way you expect it to: CSS overflow applies to block-level elements, something a <td> is not (css: display: table-cell;).

请参见 MDN上的CSS溢出

由于这个原因，我相信您将无法达到固定高度除非您在< td> s上设置 display：block; -并且您说不能那样做打破表格对齐方式，所以我认为唯一明智的选择是：

For this reason, I believe you won't be able to achieve fixed height unless you set display: block; on <td>s - and you said you can't as it would break the table alignment, so the only sensible alternative would be, in my opinion:

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

，并且< span> 设置为 display：block; （除了将 div设置为跨度而不是div并没有什么区别会破坏html验证，而跨度则不会- td 元素中不允许使用块元素）

with your <span> set to display: block; (doesn't really make a difference to have a span set to block instead of a div, apart from the fact that a div would break the html validation, while a span would not - block elements are not allowed in td elements)

这是我能想到的最优雅，最有效的方法。

it's the most elegant and valid way I can think of.

这篇关于力< tr> CSS高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！