在 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

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

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