在桌面上设置最大高度的跨浏览器方式是什么?

Ton*_*ony 2 css cross-browser

我有一个表格,我设置了tbody的高度

#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; }
Run Code Online (Sandbox Code Playgroud)

问题是,当表有1个条目时,1条目在FF3中为500px高.我希望1条目仍然是20px(或我指定的任何东西).另一个问题是Safari甚至无法识别此500px设置,因此表格没有最大高度.我只想要一个可滚动的表格,一次显示500px高价值的条目.关于如何做到这一点的任何想法?

mer*_*tor 9

您不能在任何表格元素上设置固定或最大高度.height物业仅被视为最低高度.

可以添加display: block到你的tbody.由于在这种情况下它不再是table-*显示类型之一,这使它占据高度.但是,由于tbody它不再是a table-row-group,你最终会在其中再次使用隐式表.在其他任何所以任何列thead,tbodytfoot元素将不再排队与滚动tbody.

但是,除了列不匹配之外,这确实使它几乎可以在除IE之外的所有最新浏览器中工作.您应该能够自己修复剩余的问题.

我不知道如何在IE中修复它.我确实遇到过"具有固定标题的纯CSS可滚动表",但这已经过时了,因为他的两个解决方案都在IE6中工作,但在IE7和IE8中也有可怕的破坏(以不同的方式).但它们确实可以在IE的Quirks模式下工作,所以如果您迫切需要它,那么这可能是您唯一的选择.