使用<col style>替代已废弃<col width>实现列等宽/相对宽的CSS方法

嘿，这个问题我之前也碰到过，旧的<col width="*">确实已经被废弃了，而且CSS的style属性里根本不支持那个星号语法。别担心，用标准CSS完全能实现同样的效果，甚至更灵活！

一、实现等宽列 #

核心思路是用table-layout: fixed强制表格遵循我们设置的宽度规则，避免内容自动撑开列宽，再配合百分比或CSS变量来分配宽度：

方法1：固定百分比分配 #

如果是固定列数的等宽，直接给每个列设置相等的百分比宽度即可：

table {
  table-layout: fixed; /* 关键：强制按设置的宽度渲染 */
  width: 100%; /* 让表格占满容器宽度 */
  border-collapse: collapse; /* 可选，让表格边框合并更美观 */
}
table col {
  width: 25%; /* 4列的话每列25%，3列就设33.33% */
}
/* 可选：让内容自动换行，避免撑破列宽 */
table td {
  overflow-wrap: break-word;
  padding: 8px;
  border: 1px solid #ddd;
}

对应的HTML：

<table>
  <col><col><col><col>
  <tr>
    <td>短内容</td>
    <td>这是一段很长很长的测试内容，用来验证列宽是否保持一致</td>
    <td>中等长度内容</td>
    <td>短内容</td>
  </tr>
</table>

方法2：动态列数的等宽（用CSS变量） #

如果列数不固定，可以用CSS变量来动态计算宽度，非常灵活：

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
table col {
  width: calc(100% / var(--column-count)); /* 用变量计算每列宽度 */
}
table td {
  overflow-wrap: break-word;
  padding: 8px;
  border: 1px solid #ddd;
}

对应的HTML（比如3列的情况）：

<table style="--column-count: 3">
  <col><col><col>
  <tr>
    <td>内容1</td>
    <td>长内容测试长内容测试长内容测试</td>
    <td>内容3</td>
  </tr>
</table>

二、实现相对宽度（类似星号的比例分配） #

如果想要某几列按比例分配剩余空间（比如模拟旧的*语法），同样可以借助table-layout: fixed和calc来实现：

示例：1列固定宽度，剩余列占满剩余空间 #

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
/* 第一列固定宽度 */
table col:first-child {
  width: 120px;
}
/* 剩余列自动分配剩余宽度 */
table col:not(:first-child) {
  width: calc((100% - 120px) / 2); /* 如果是2列剩余，就除以2 */
}
table td {
  overflow-wrap: break-word;
  padding: 8px;
  border: 1px solid #ddd;
}

示例：按比例分配（比如2:3:5） #

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
table col:nth-child(1) {
  width: 20%;
}
table col:nth-child(2) {
  width: 30%;
}
table col:nth-child(3) {
  width: 50%;
}

关键注意点 #

• table-layout: fixed是核心，它会让表格优先遵循我们设置的列宽，而不是根据内容自动调整，这是实现精确列宽控制的前提。
• 如果不需要强制固定列宽（比如允许内容稍微撑开一点），可以去掉table-layout: fixed，但此时百分比宽度的表现会更依赖内容，建议还是加上它来保证一致性。
• 记得给td加上overflow-wrap: break-word或white-space: nowrap（根据需求选择），避免超长内容破坏布局。

内容的提问来源于stack exchange，提问作者BurninLeo