我有一个带滚动条的表,当我过滤表时,滚动条未显示,这对我来说很好,但是宽度正在变化的问题,并且bigget从表的宽度。它看起来像这样:
1.使用scrollbar:
1.无滚动条,筛选后:
这是我的CSS代码:
.table {
table-layout: fixed;
width: 100% !important;
}
tbody {
display: block;
height: 326px;
overflow: auto;
width: 1205px;
}
thead, tbody tfoot, tr {
display: table;
width: 100%;
table-layout: fixed; /* even columns width , fix width of table too*/
}
thead {
table-layout: fixed;
}
.table tr th:nth-child(1), .table tr td:nth-child(1) {
width: 30px !important;
}
.table tr th:nth-child(2), .table tr td:nth-child(2) {
width: 90px !important;
}
.table tr th:nth-child(3), .table tr td:nth-child(3) {
width: 100px !important;
}
.table tr th:nth-child(4), .table tr td:nth-child(4) {
width: 90px !important;
}
.table tr th:nth-child(5), .table tr td:nth-child(5) {
width: 90px !important;
}
.table tr th:nth-child(6), .table tr td:nth-child(6) {
width: 90px !important;
}
.table tr th:nth-child(7), .table tr td:nth-child(7) {
width: 85px !important;
}
.table tr th:nth-child(8), .table tr td:nth-child(8) {
width: 90px !important;
}
.table tr th:nth-child(9), .table tr td:nth-child(9) {
width: 110px !important;
}
.table tr th:nth-child(10), .table tr td:nth-child(10) {
width: 95px !important;
}
如何解决我的问题?
1条答案
按热度按时间dw1jzc5e1#
如果你想确保你的元素在滚动条出现的时候不会移动,那么在溢出属性应用的元素上使用
scrollbar-gutter:stable
。MDN上的滚动条槽