我有带有滚动条的表格,当我过滤表格时,滚动条未显示,这对我有好处,但问题是宽度正在变化,并且表格宽度变大。 它看起来像这样:
带滚动条:
没有滚动条,过滤后:
这是我的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; }
如何解决我的问题?
P粉8422150062024-04-03 00:25:30
如果您想确保元素在出现滚动条时不会移动,请在应用了溢出属性的元素上使用 scrollbar-gutter:stable
。见下文。
MDN 上的滚动条装订线 p>
.table { table-layout: fixed; width: 100% !important; } tbody { display: block; height: 100px; overflow: auto; width: 1205px; /* added this */ scrollbar-gutter: stable; } 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; }
<table class='table'> <tbody> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> </tbody> </table> <p>No scroll bar</p> <table class='table'> <tbody> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> <tr> <td>A01</td> <td>AAA02</td> <td>AAA03</td> <td>AAA04</td> <td>AAA05</td> <td>AAA06</td> <td>AAA07</td> <td>AAA08</td> <td>AAA09</td> <td>AAA10</td> </tr> </tbody> </table>