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

时间：2021-03-05 03:15:45

标签： html css

我有一个表格，它通过动态创建表格内的所有元素来加载数据。类似于 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>

3 个答案:

答案 0 :(得分：1)

需要将 th 设置为某个固定宽度，然后列将停止调整大小。由于您有 6 列，因此我选择了宽度：每个 16.6%，即 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>

答案 1 :(得分：0)

我会发表评论，但我的声誉还不够高。

无论如何，

我认为您的答案在于以下代码中的宽度需要更改为静态数字，而不是百分比。

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

而且，您的目标是.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th 类，它们是单元本身。如果您定位 .r-thead.tr 和 .r-tbody-tr 可能会更好，因为它们是您的单元格的容器。希望这能解决您的问题。

答案 2 :(得分：-1)

尝试使用 html 'colspan' 属性

相关问题
最新问题