如何通过CSS根据表格中td的数量设置其宽度？

完全不需要修改外部HTML，只用CSS就能搞定根据<td>数量自动分配宽度的需求。这里可以利用CSS的:has()伪类来检测每行<tr>里的单元格数量，然后给对应单元格设置宽度：

/* 1个单元格时，宽度100% */
tr:has(> td:first-child:last-child) td {
  width: 100%;
}

/* 2个单元格时，各占50% */
tr:has(> td:first-child:nth-child(2):last-child) td {
  width: 50%;
}

/* 3个单元格时，各占1/3 */
tr:has(> td:first-child:nth-child(3):last-child) td {
  width: calc(100% / 3);
}

/* 4个单元格时，各占25% */
tr:has(> td:first-child:nth-child(4):last-child) td {
  width: 25%;
}

/* 可根据需求继续扩展到更多单元格数量 */

原理说明： #

• :has()伪类是核心，它能让父元素<tr>根据子元素的特征应用样式。比如tr:has(> td:first-child:last-child)表示这个<tr>里的第一个<td>同时也是最后一个——也就是整行只有1个单元格。
• 对于3个及以上的单元格，用calc(100% / N)可以自动计算出等分宽度，不用手动写固定百分比，更灵活。

兼容性提示： #

:has()已经被Chrome、Firefox 121+、Safari 15.4+等现代浏览器支持，如果你的项目不需要兼容特别老旧的浏览器，这个方案完全可用。

拿你给出的示例HTML来说：

<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>baz</td>
  </tr>
</table>

应用上面的CSS后，三个<td>会自动各占1/3的宽度。

内容的提问来源于stack exchange，提问作者rap-2-h