带有垂直滚动的html表

Question

我正在尝试使用固定标头的tbody内的垂直滚动条。我尝试了链接中提供的解决方案。

HTML table with 100% width, with vertical scroll inside tbody

table {
width: 100%;
border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width:    -moz-calc(100% - 16px);
width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

tbody td, thead th {
width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}

如果滚动条出现，它可以正常工作。但是如果行很少并且滚动条没有出现，那么thead就不会与tbody对齐。我怎样才能解决css的问题？

Answer 1

一旦您的tbody数据从指定的高度移出，您的y轴就会被激活。

 tbody {
        height: 50px;
        display: inline-block;
        width: 100%;
        overflow-y:scroll;
    }

Answer 2

这是因为上面的CSS将thead tr宽度的宽度减少到 97％或（100％ - 滚动条的宽度）由于tbody中的滚动条，可以适应缩小的tbody宽度。如果tbody中没有滚动条，那么tbody仍然完全100％宽，但thead仍在变窄。

您希望修复的是CSS，CSS无法识别滚动条没有足够的行显示的事实。您可以使用JavaScript修复它 - 只需查看您引用的答案，有一些示例使用JavaScript将tbody列的宽度应用于thead的开头。答案。

修改

或者始终强制垂直滚动条，这样无论行数如何，tbody的宽度都不会改变：

tbody {
    # ... other attributes
    overflow-y: scroll;
}

取自： Force Vertical Scrollbar

Answer 3

使用tbody max-height:100px代替height:100px

tbody {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}