我正在尝试修复html表的标题并滚动表体的其余部分。 为了修复列我使用以下css,但问题是它扰乱了标题的列大小。
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
答案 0 :(得分:1)
相关帖子
1)Table with fixed header and fixed column on pure css
3)How to display scroll bar onto a html table
4)Various Tables also there are some of them - with fixed header css你可以在html页面找到它,如果你检查它
希望它能帮到你
答案 1 :(得分:0)
将标题放在单独的表中,将内容放在另一个表中,但将两个表放在一起,使其看起来像一个表。
<table>
put headers here.
</table>
<table>
put content here.
</table>
答案 2 :(得分:0)
尝试使用css属性overflow:overlay