力< 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屋!