html - 根据标题宽度保持表格宽度和列宽相同

Question

我有一个表格，它通过动态创建表格中的所有元素来加载数据。类似于datatable的东西。现在，每次我tbody为下一页重新生成时，列宽都会根据文本长度而变化，并且会改变表格宽度。我试过了table-layout: fixed，td {width: 1%}但它们不起作用。我想保持表格列宽与标题文本宽度相同。我怎样才能做到这一点？

let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
  tbody1.classList.toggle('no-display');
  tbody2.classList.toggle('no-display');
}, 1000)

table {
    border-collapse: collapse;
    -webkit-box-shadow: #e2e2e2 0 10px 20px;
    -moz-box-shadow: #e2e2e2 0 10px 20px;
    box-shadow: #e2e2e2 0 10px 20px;
    border-radius: 10px;
    overflow: hidden;
    /*table-layout: fixed;*/
    /*width: 934px;*/
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
    padding: 12px 25px;
    text-align: left;
    /*width: 1%;*/
    overflow: hidden;
    border-collapse: collapse;
}

.no-display {
  display:none;
}

<div class="table-container" id="table-container">
    <div class="r-header-controller"></div>
    <table id="custom-table">
        <thead class="r-thead">
            <tr class="r-thead-tr">
                <th class="r-thead-tr-th">Name</th>
                <th class="r-thead-tr-th">Designation</th>
                <th class="r-thead-tr-th">City</th>
                <th class="r-thead-tr-th">Postal</th>
                <th class="r-thead-tr-th">Start date</th>
                <th class="r-thead-tr-th">Salary</th>
            </tr>
        </thead>
        <tbody id="t-body-1" class="r-tbody">
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Brielle Williamson</td>
                <td class="r-tbody-tr-td">Integration Specialist</td>
                <td class="r-tbody-tr-td">New York</td>
                <td class="r-tbody-tr-td">4804</td>
                <td class="r-tbody-tr-td">2012/12/02</td>
                <td class="r-tbody-tr-td">$372,000</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Herrod Chandler</td>
                <td class="r-tbody-tr-td">Sales Assistant</td>
                <td class="r-tbody-tr-td">San Francisco</td>
                <td class="r-tbody-tr-td">9608</td>
                <td class="r-tbody-tr-td">2012/08/06</td>
                <td class="r-tbody-tr-td">$137,500</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Rhona Davidson</td>
                <td class="r-tbody-tr-td">Integration Specialist</td>
                <td class="r-tbody-tr-td">Tokyo</td>
                <td class="r-tbody-tr-td">6200</td>
                <td class="r-tbody-tr-td">2010/10/14</td>
                <td class="r-tbody-tr-td">$327,900</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Colleen Hurst</td>
                <td class="r-tbody-tr-td">Javascript Developer</td>
                <td class="r-tbody-tr-td">San Francisco</td>
                <td class="r-tbody-tr-td">2360</td>
                <td class="r-tbody-tr-td">2009/09/15</td>
                <td class="r-tbody-tr-td">$205,500</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Sonya Frost</td>
                <td class="r-tbody-tr-td">Software Engineer</td>
                <td class="r-tbody-tr-td">Edinburgh</td>
                <td class="r-tbody-tr-td">1667</td>
                <td class="r-tbody-tr-td">2008/12/13</td>
                <td class="r-tbody-tr-td">$103,600</td>
            </tr>
        </tbody>
        <tbody id="t-body-2" class="r-tbody no-display">
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Jena Gaines</td>
              <td class="r-tbody-tr-td">Office Manager Office Manager</td>
              <td class="r-tbody-tr-td">London</td>
              <td class="r-tbody-tr-td">3814</td>
              <td class="r-tbody-tr-td">2008/12/19</td>
              <td class="r-tbody-tr-td">$90,560</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Quinn Flynn</td>
              <td class="r-tbody-tr-td">Support Lead</td>
              <td class="r-tbody-tr-td">Edinburgh</td>
              <td class="r-tbody-tr-td">9497</td>
              <td class="r-tbody-tr-td">2013/03/03</td>
              <td class="r-tbody-tr-td">$342,000</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Charde Marshall</td>
              <td class="r-tbody-tr-td">Regional Director</td>
              <td class="r-tbody-tr-td">San Francisco</td>
              <td class="r-tbody-tr-td">6741</td>
              <td class="r-tbody-tr-td">2008/10/16</td>
              <td class="r-tbody-tr-td">$470,600</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Haley Kennedy</td>
              <td class="r-tbody-tr-td">Senior Marketing Designer</td>
              <td class="r-tbody-tr-td">London</td>
              <td class="r-tbody-tr-td">3597</td>
              <td class="r-tbody-tr-td">2012/12/18</td>
              <td class="r-tbody-tr-td">$313,500</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
              <td class="r-tbody-tr-td">Regional Director</td>
              <td class="r-tbody-tr-td">London</td>
              <td class="r-tbody-tr-td">1965</td>
              <td class="r-tbody-tr-td">2010/03/17</td>
              <td class="r-tbody-tr-td">$385,750</td>
          </tr>
      </tbody>
        <tfoot class="r-tfoot">
            <tr class="r-tfoot-tr">
                <th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
                <th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
            </tr>
        </tfoot>
    </table>
    <div class="r-footer-controller">
    </div>
</div>

标签： htmlcss

Answer 1

需要将 th 设置为某个固定宽度，然后列将停止调整大小。由于您有 6 列，因此我选择了宽度：16.6% for each th，即 100%/6。

let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
  tbody1.classList.toggle('no-display');
  tbody2.classList.toggle('no-display');
}, 1000)

table {
    border-collapse: collapse;
    -webkit-box-shadow: #e2e2e2 0 10px 20px;
    -moz-box-shadow: #e2e2e2 0 10px 20px;
    box-shadow: #e2e2e2 0 10px 20px;
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
    width: 934px;
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
    padding: 12px 25px;
    text-align: left;
    /*width: 1%;*/
    overflow: hidden;
    border-collapse: collapse;
}

.no-display {
  display:none;
}

th {
  width: 16.6%;
}

<div class="table-container" id="table-container">
    <div class="r-header-controller"></div>
    <table id="custom-table">
        <thead class="r-thead">
            <tr class="r-thead-tr">
                <th class="r-thead-tr-th">Name</th>
                <th class="r-thead-tr-th">Designation</th>
                <th class="r-thead-tr-th">City</th>
                <th class="r-thead-tr-th">Postal</th>
                <th class="r-thead-tr-th">Start date</th>
                <th class="r-thead-tr-th">Salary</th>
            </tr>
        </thead>
        <tbody id="t-body-1" class="r-tbody">
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Brielle Williamson</td>
                <td class="r-tbody-tr-td">Integration Specialist</td>
                <td class="r-tbody-tr-td">New York</td>
                <td class="r-tbody-tr-td">4804</td>
                <td class="r-tbody-tr-td">2012/12/02</td>
                <td class="r-tbody-tr-td">$372,000</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Herrod Chandler</td>
                <td class="r-tbody-tr-td">Sales Assistant</td>
                <td class="r-tbody-tr-td">San Francisco</td>
                <td class="r-tbody-tr-td">9608</td>
                <td class="r-tbody-tr-td">2012/08/06</td>
                <td class="r-tbody-tr-td">$137,500</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Rhona Davidson</td>
                <td class="r-tbody-tr-td">Integration Specialist</td>
                <td class="r-tbody-tr-td">Tokyo</td>
                <td class="r-tbody-tr-td">6200</td>
                <td class="r-tbody-tr-td">2010/10/14</td>
                <td class="r-tbody-tr-td">$327,900</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Colleen Hurst</td>
                <td class="r-tbody-tr-td">Javascript Developer</td>
                <td class="r-tbody-tr-td">San Francisco</td>
                <td class="r-tbody-tr-td">2360</td>
                <td class="r-tbody-tr-td">2009/09/15</td>
                <td class="r-tbody-tr-td">$205,500</td>
            </tr>
            <tr class="r-tbody-tr">
                <td class="r-tbody-tr-td">Sonya Frost</td>
                <td class="r-tbody-tr-td">Software Engineer</td>
                <td class="r-tbody-tr-td">Edinburgh</td>
                <td class="r-tbody-tr-td">1667</td>
                <td class="r-tbody-tr-td">2008/12/13</td>
                <td class="r-tbody-tr-td">$103,600</td>
            </tr>
        </tbody>
        <tbody id="t-body-2" class="r-tbody no-display">
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Jena Gaines</td>
              <td class="r-tbody-tr-td">Office Manager Office Manager</td>
              <td class="r-tbody-tr-td">London</td>
              <td class="r-tbody-tr-td">3814</td>
              <td class="r-tbody-tr-td">2008/12/19</td>
              <td class="r-tbody-tr-td">$90,560</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Quinn Flynn</td>
              <td class="r-tbody-tr-td">Support Lead</td>
              <td class="r-tbody-tr-td">Edinburgh</td>
              <td class="r-tbody-tr-td">9497</td>
              <td class="r-tbody-tr-td">2013/03/03</td>
              <td class="r-tbody-tr-td">$342,000</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Charde Marshall</td>
              <td class="r-tbody-tr-td">Regional Director</td>
              <td class="r-tbody-tr-td">San Francisco</td>
              <td class="r-tbody-tr-td">6741</td>
              <td class="r-tbody-tr-td">2008/10/16</td>
              <td class="r-tbody-tr-td">$470,600</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Haley Kennedy</td>
              <td class="r-tbody-tr-td">Senior Marketing Designer</td>
              <td class="r-tbody-tr-td">London</td>
              <td class="r-tbody-tr-td">3597</td>
              <td class="r-tbody-tr-td">2012/12/18</td>
              <td class="r-tbody-tr-td">$313,500</td>
          </tr>
          <tr class="r-tbody-tr">
              <td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
              <td class="r-tbody-tr-td">Regional Director</td>
              <td class="r-tbody-tr-td">London</td>
              <td class="r-tbody-tr-td">1965</td>
              <td class="r-tbody-tr-td">2010/03/17</td>
              <td class="r-tbody-tr-td">$385,750</td>
          </tr>
      </tbody>
        <tfoot class="r-tfoot">
            <tr class="r-tfoot-tr">
                <th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
                <th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
            </tr>
        </tfoot>
    </table>
    <div class="r-footer-controller">
    </div>
</div>