精确控制表格列宽

核心痛点

表格的宽高往往难以预测。即使手动设置了尺寸，浏览器仍会优先根据单元格内容自动调整，导致最终布局与预期不符。这种“自动计算”机制也使得浏览器渲染表格时性能损耗较高。

解决办法：固定布局算法

通过开启 固定表格布局算法（Fixed Table Layout），可以让表格行为变得完全可控。

只需对 <table> 或 display: table 的元素应用以下样式：

table {
  /* 默认为 auto，会根据内容自动撑开 */
  table-layout: fixed;
  /* 建议配合 width 使用，确保宽度基准统一 */
  width: 100%;
}

布局行为对比