Saya mempunyai jadual dengan bar skrol dan apabila saya menapis jadual bar skrol tidak menunjukkan yang baik untuk saya tetapi masalahnya ialah lebarnya berubah dan lebar jadual semakin besar. Ia kelihatan seperti ini:
Dengan bar skrol:
Tiada bar skrol, selepas ditapis:
Ini kod CSS saya:
.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; }
Bagaimana untuk menyelesaikan masalah saya?
Jika anda ingin memastikan elemen tidak bergerak apabila bar skrol muncul, gunakan
Tatal Gutterscrollbar-gutter:stable
pada elemen yang mempunyai atribut limpahan digunakan. lihat di bawah.pada MDN p>