html - Bootstrap表格设置单元格宽度问题

Question

我的 Bootstrap 表存在以下问题。我无法为表头的单元格设置自定义宽度。即使我这样做，它也没有设置。我搜索并了解到 Bootstrap 确实通过向单元格添加填充来防止这种情况。但是当我在表头的每个单元格中添加 padding:0 时它仍然不起作用。不管怎样，让我展示一下代码和截图

<div class="col-md-12 col-sm-12 col-xs-12">
  <div class="table-responsive">
    <table class="table table-hover table-white">
      <thead>
        <tr>
          <th style="max-width: 1%;">#</th>
          <th style="max-width: 48.5%;">Component</th>
          <th style="max-width: 2.5%;">Unit Cost</th>
          <th style="max-width: 2.5%;">Qty</th>
          <th style="max-width: 2.5%;">Currency</th>
          <th style="max-width: 13%;">WBS</th>
          <th style="max-width: 14%;">Purchase Type</th>
          <th style="max-width: 10%;">Vendor</th>
          <th style="max-width: 2%;"></th>
          <th style="max-width: 2%;"></th>
          <th style="max-width: 2%;"></th>
        </tr>
      </thead>
    </table>
  </div>
</div>

它看起来像这样，因为您可以看到未应用宽度

但是没有滚动条应该是这样的。

所以我的问题是

1. 如何为这些单元格应用固定宽度？
2. 如何在没有滚动条的情况下让表格看起来 100% 可见。以某种方式挤压它

谢谢，提前。如果还有什么需要分享的，请告诉我。

Answer 1

您需要禁用所有单元格的填充，而不仅仅是标题中的单元格。

如果你不想，更大的内容会增加列宽，你应该 overflow hidden 。

.table-responsive td,
.table-responsive th {
    padding: 0 !important;
    overflow: hidden;
}

如果您想调整表格大小以始终适合屏幕，您需要一些 JavaScript。

(function() {
  const responsiveTable = document.querySelector('.responsive-table table');
  responsiveTable.style.transformOrigin = '0 0';


  function resizeTable() {
    responsiveTable.style.transform = 'scale(1)';
    const tableWidth = responsiveTable.getBoundingClientRect().width;
    const resizeFactor = document.body.offsetWidth / tableWidth;
    responsiveTable.style.transform = `scale(${resizeFactor})`;
  }
  resizeTable();

  window.addEventListener('resize', resizeTable);
})();

.responsive-table table {
  background-color: red;
}

.responsive-table td,
.responsive-table th {
  background-color: orange;
}

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th style="width: 5%">Column 1</th>
        <th style="width: 5%">Column 2</th>
        <th style="width: 5%">Column 3</th>
        <th style="width: 5%">Column 4</th>
        <th style="width: 5%">Column 5</th>
        <th style="width: 5%">Column 6</th>
        <th style="width: 5%">Column 7</th>
        <th style="width: 5%">Column 8</th>
        <th style="width: 5%">Column 9</th>
        <th style="width: 5%">Column 10</th>
        <th style="width: 5%">Column 11</th>
        <th style="width: 5%">Column 12</th>
        <th style="width: 5%">Column 13</th>
        <th style="width: 5%">Column 14</th>
        <th style="width: 5%">Column 15</th>
        <th style="width: 5%">Column 16</th>
        <th style="width: 5%">Column 17</th>
        <th style="width: 5%">Column 18</th>
        <th style="width: 5%">Column 19</th>
        <th style="width: 5%">Column 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
      </tr>
      <tr>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
      </tr>
      <tr>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
      </tr>
    </tbody>
  </table>
</div>