引导程序表设置单元格宽度问题

Question

我的引导表存在以下问题。我无法为表格头的单元格设置自定义宽度。即使我这样做，也没有设置。我搜索并了解到引导程序确实通过在单元格中添加填充来防止这种情况。但是，当我向表头的每个单元格添加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

您可以编码：

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

和样式

.table-responsive {
    display: table;
}

Answer 2

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

如果您不希望，较大的内容会增加列宽，则应隐藏溢出。

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