colgroup col width 属性现在已被弃用，是否有任何替代方法？答案

【问题标题】：Is there any alternative to colgroup col width attribute now it has been deprecated?colgroup col width 属性现在已被弃用，是否有任何替代方法？
【发布时间】：2021-08-01 20:32:09
【问题描述】：

MDN page on colgroup 表示不推荐使用 col 宽度，但是当涉及 colspan 时我没有找到替代方法，您需要指定“colspanned”列的宽度。

下面是一个相当简约的 sn-p 来说明这个问题，对于一个三列两行的表。中间列永远不会用“td”元素显式。

使用 colgroup，可以指定其宽度，然后一切正常。没有 colgroup，HTML 渲染引擎无法求解方程，列宽渲染不正确。

  table {
    border-collapse: collapse;
  }
  .w100 { width: 100px; background-color: red }
  .w200 { width: 200px; background-color: green }

<!DOCTYPE html>
<html>
<body>
With colgroups  
<table>
  <colgroup>
    <col style="width:100px">
    <col style="width:100px">
    <col style="width:100px">
  </colgroup>
  <tbody>
    <tr>
      <td class="w100">A
      <td class="w200" colspan="2">B
    <tr>
      <td class="w200" colspan="2">C
      <td class="w100">D
  </tbody>
</table>
    
<p></p>

No colgroups    
<table>
  <tbody>
    <tr>
      <td class="w100">A
      <td class="w200" colspan="2">B
    <tr>
      <td class="w200" colspan="2">C
      <td class="w100">D
  </tbody>
</table>
    
</body>
</html>

【问题讨论】：

标签： css html-table col

【解决方案1】：

官方的解决方案是在 CSS 中使用 :nth-child。

.table_8 td:nth-child(1) {
    text-align: right;
    width: 32px;
}

但这是非常不切实际的！在我看来， col 宽度应该被弃用。据我所知，所有浏览器都支持它。 https://caniuse.com/?search=col%20width

【讨论】：

Firefox 不再正确支持它，我只是通过关于不正确列宽的最终用户错误报告发现了弃用：/