在 tbody 内垂直滚动的 html 表格

Question

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

100% 宽度的 HTML 表格，在 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 问题？

原文由 Nagendra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 frnt 发布，翻译遵循 CC BY-SA 3.0 许可协议