Tukar lebar badan apabila bar skrol tidak ditunjukkan

Question

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:

1. Dengan bar skrol:

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

Answer 1

Jika anda ingin memastikan elemen tidak bergerak apabila bar skrol muncul, gunakan scrollbar-gutter:stable pada elemen yang mempunyai atribut limpahan digunakan. lihat di bawah.

Tatal Gutter

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