html表格与tbody内的垂直滚动
我正在尝试使用固定标题的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;
}
如果滚动条出现，它可以正常工作。但是如果行很少并且滚动条没有出现，那么该ad不与tbody对齐。 我怎样才能解决这个问题与CSS？
一旦你的tbody数据从指定的高度移出，你的y轴被激活。
tbody {
height: 50px;
display: inline-block;
width: 100%;
overflow-y:scroll;
}
这是因为上面的CSS将thead tr宽度的宽度减小到97％或（100％ - 滚动条的宽度），以适应由于tbody中的滚动条而减小的宽度。 如果在tbody中没有滚动条，那么这个tbody仍然完全是100％宽，但是它仍然在缩小。
你想修正的是CSS，而CSS不能识别滚动条没有足够的行显示的事实。 你可以使用JavaScript修复它 - 只要看看你引用的答案，就可以在答案的开头部分使用JavaScript将tbody列的宽度应用到thead。
编辑
或者在任何时候强制垂直滚动条，这样不管行数如何，tbody的宽度都不会改变：
tbody {
# ... other attributes
overflow-y: scroll;
}
取自：强制垂直滚动条
使用tbody max-height:100px而不是height:100px
tbody {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}