我有一个表格数据。那里有固定的。我只为tbody添加了滚动
tbody{
display: block;
height: 102px;
overflow-y: auto;
}
这里,由于滚动条,thead和tbody在对齐方面不匹配。 Scrollbar需要一些widtin tbody
https://jsfiddle.net/MohaideenIsmail/6hm2oaLe/
这是这样的。怎么避免这个?
答案 0 :(得分:0)
您好,只需更换样式
CSS
table {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}[![enter image description here][1]][1]
table tbody,
table thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table > thead > tr > th:not(first-child){
min-width:145px;
}
table > tbody > tr > td:not(first-child) {
min-width:145px;
}
table tbody {
height: 60px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
border-right: 1px solid black;
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
检查JsFiddle
答案 1 :(得分:0)
请尝试下面的代码,我已经为你的th和td增加了宽度,使它们完美对齐,但在移动设备上你必须使用媒体查询并减小th的宽度,如下所示。
table > thead > tr > th{
width:9.15%;
text-align:left;
}
tbody > tr > td{
width:5%;
text-align:left;
}
根据您的需要对齐文字。