tbody 内带有垂直滚动的 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

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

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