我有一个表格,我设置了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高价值的条目.关于如何做到这一点的任何想法?
您不能在任何表格元素上设置固定或最大高度.该height
物业仅被视为最低高度.
你可以添加display: block
到你的tbody
.由于在这种情况下它不再是table-*
显示类型之一,这将使它占据高度.但是,由于tbody
它不再是a table-row-group
,你最终会在其中再次使用隐式表.在其他任何所以任何列thead
,tbody
或tfoot
元素将不再排队与滚动tbody
.
但是,除了列不匹配之外,这确实使它几乎可以在除IE之外的所有最新浏览器中工作.您应该能够自己修复剩余的问题.
我不知道如何在IE中修复它.我确实遇到过"具有固定标题的纯CSS可滚动表",但这已经过时了,因为他的两个解决方案都在IE6中工作,但在IE7和IE8中也有可怕的破坏(以不同的方式).但它们确实可以在IE的Quirks模式下工作,所以如果您迫切需要它,那么这可能是您唯一的选择.