table的th元素设置小于15px的宽度不生效是什么原因？

问题原因 #

表格th/td元素默认存在宽度收缩下限，手动设置小于15px的width不生效通常是三个原因导致：

• Bootstrap的table-bordered类默认给th/td添加了8px内边距，这部分内边距会直接撑大单元格基础宽度
• 浏览器对表格单元格有隐式的最小宽度计算规则，默认会给单元格设置不小于内容最小容纳尺寸的min-width，优先级高于手动设置的width值
• 未配置溢出规则时，单元格会自动适配内容尺寸，不会收缩到设定的极小宽度值

修复方案 #

按以下配置修改th样式即可实现任意小宽度的th设置：

• 清除默认内边距：添加padding: 0 !important，移除框架默认内边距占用的宽度
• 突破最小宽度限制：添加min-width: 0 !important，这是核心生效配置，直接覆盖浏览器默认的最小宽度计算规则
• 配置溢出隐藏：添加overflow: hidden，避免后续放入单元格的内容撑破设定的宽度
• 可选配置统一盒模型：添加box-sizing: border-box，让单元格边框宽度被包含在设置的width值内，不会额外增加单元格总宽度

修复后可运行代码 #

<div class="col-md-12" style="overflow-x: auto;">               
  <div class="table-responsive" style="display: table !important;">
    <table class="bordered table-bordered" style="border:none; table-layout: fixed !important;" id="tabla_1">
      <tr align="center">
        <th style="width: 3px !important; min-width: 0 !important; padding: 0 !important; height: 30px; overflow: hidden; box-sizing: border-box; background: #00A7E1; border-color: #00A7E1;"></th>
      </tr>
    </table>
  </div>
</div>

如果配置后仍未达到预期宽度，检查父级table-responsive容器是否存在默认padding或min-width配置，清除对应限制即可。

内容的提问来源于stack exchange，提问作者Victor Leonardo Robles Ortega