css 当滚动条不显示时改变tbody的宽度

qacovj5a  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(145)

我有一个带滚动条的表,当我过滤表时,滚动条未显示,这对我来说很好,但是宽度正在变化的问题,并且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;
}

如何解决我的问题?

dw1jzc5e

dw1jzc5e1#

如果你想确保你的元素在滚动条出现的时候不会移动,那么在溢出属性应用的元素上使用scrollbar-gutter:stable
MDN上的滚动条槽

.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>

相关问题