Changer la largeur du corps lorsque les barres de défilement ne sont pas affichées
P粉211273535
P粉211273535 2024-04-02 11:15:58
0
1
418

J'ai un tableau avec des barres de défilement et lorsque je filtre le tableau, les barres de défilement ne s'affichent pas, ce qui est bien pour moi, mais le problème est que la largeur change et que la largeur du tableau augmente. Cela ressemble à ceci :

  1. Avec barre de défilement :

  2. Pas de barre de défilement, après filtrage :

Voici mon code 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;
}

Comment résoudre mon problème ?

P粉211273535
P粉211273535

répondre à tous(1)
P粉842215006

Si vous souhaitez vous assurer qu'un élément ne bouge pas lorsqu'une barre de défilement apparaît, utilisez scrollbar-gutter:stable sur un élément auquel l'attribut overflow est appliqué. voir ci-dessous.

Faites défiler Gutter

sur 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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal