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

我的引导表有以下问题。我无法在表头设置单元格的自定义宽度。即使我这样做了，它也没有设定。我搜索并了解到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>

#
组成部分
单位成本
数量
通货
WBS
采购类型
小贩

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

但是，如果没有滚动条，它应该是这样的

所以我的问题是

如何将固定宽度应用于这些单元格

如果没有滚动条，如何使表格看起来100%可见。不知怎么的挤压它

事先谢谢你。如果需要共享其他内容，请告诉我。

您可以编写代码：

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

---

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

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

。表响应td，
.表1{
填充：0！重要；
溢出：隐藏；
}

如果希望调整表的大小以始终适合屏幕，则需要一些JavaScript

（函数（）{
const responsiveTable=document.querySelector（“.responsiveTable”）；
responsiveTable.style.transformOrigin='0'；
函数resizeTable（）{
responsiveTable.style.transform='scale（1）'；
const tableWidth=responsiveTable.getBoundingClientRect（）.width；
const resizeFactor=document.body.offsetWidth/tableWidth；
responsiveTable.style.transform=`scale（${resizeFactor}）`；
}
可调整大小（）；
window.addEventListener（“调整大小”，可调整大小）；
})();
。响应表{
背景色：红色；
}
.响应表td，
.响应表th{
背景颜色：橙色；
}

第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏
第10栏
第11栏
第12栏
第13栏
第14栏
第15栏
第16栏
第17栏
第18栏
第19栏
第20栏
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
尝试使用固定的表格布局，宽度大于最大宽度^Pete的建议你试过了吗？可能是@Pete的复制品，不是吗worked@reiallenramos，这些解决方案对我不起作用：/你在Bootstrap 4上，对吗？我正在尝试其他东西…尝试了，但它只是隐藏了滚动条，其余的就不可见了
.table-responsive {
    display: table;
}