首页  >  问答  >  正文

当滚动条未显示时更改 tbody 的宽度

我有带有滚动条的表格,当我过滤表格时,滚动条未显示,这对我有好处,但问题是宽度正在变化,并且表格宽度变大。 它看起来像这样:

  1. 带滚动条:

  2. 没有滚动条,过滤后:

这是我的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粉211273535P粉211273535216 天前359

全部回复(1)我来回复

  • P粉842215006

    P粉8422150062024-04-03 00:25:30

    如果您想确保元素在出现滚动条时不会移动,请在应用了溢出属性的元素上使用 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>

    回复
    0
  • 取消回复