代码之家 › 专栏 › 技术社区 › Tony

跨浏览器在表格上设置最大高度的方法是什么?

cross-browser css

2

Tony · 技术社区 · 16 年前

我有一张桌子,我在上面设定车身的高度

#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; }

问题是,当表有1个条目时,1个条目在ff3中的高度为500px。我希望1项仍然是20px(或我指定的任何内容)。另一个问题是Safari甚至不能识别这个500px的设置,所以桌子没有最大高度。我只想要一个滚动表,一次显示500像素高的条目。有什么办法吗?

2 回复 | 直到 16 年前

1

9

mercator 16 年前

不能在任何表元素上设置固定高度或最大高度。 The height property is only treated as a minimum height.

你可以添加 display: block 对你 tbody . 因为它不再是 table-* display types 在这种情况下, 将让它保持高度。然而,自从 表格主体 不再是 table-row-group 最后,您将再次得到一个隐式表。所以其他任何列 thead , 表格主体 或 tfoot 元素将不再与可滚动的元素对齐 表格主体 .

不过,除了列不匹配之外,这确实使它几乎在除IE之外的所有最新浏览器中工作。您应该能够自己解决剩余的问题。

不过,我不知道如何在IE中修复它。我确实遇到过 "Pure CSS Scrollable Table with Fixed Header" 但这已经过时了,因为他的两个解决方案都在IE6中有效,但在IE7和IE8中却发生了可怕的破坏(以不同的方式)。他们做但是,在IE的怪癖模式下工作,所以如果你非常需要它,那可能是你唯一的选择。

2

0

Gordon Gustafson 16 年前

Thom有一个正确的想法:使用javascript。如果窗口足够大,而桌子太大,请在桌子/元素上设置固定的手动高度。D