需要滚动条与css中的数据重叠

Question

我有一个表格数据。那里有固定的。我只为tbody添加了滚动

tbody{
display: block;
    height: 102px;
    overflow-y: auto;
}

这里，由于滚动条，thead和tbody在对齐方面不匹配。 Scrollbar需要一些widtin tbody

https://jsfiddle.net/MohaideenIsmail/6hm2oaLe/

这是这样的。怎么避免这个？

Answer 1

您好，只需更换样式

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

Answer 2

请尝试下面的代码，我已经为你的th和td增加了宽度，使它们完美对齐，但在移动设备上你必须使用媒体查询并减小th的宽度，如下所示。

table > thead > tr > th{
  width:9.15%;
  text-align:left;
}   
tbody > tr > td{
  width:5%;
    text-align:left;
}

根据您的需要对齐文字。