现在colgroup的col宽度属性已经被弃用了，有没有替代方案？

Question

现在colgroup的col宽度属性已经被弃用了，有没有替代方案？

3

MDN关于colgroup的页面表明col宽度已被弃用，但在涉及到colspan时，我并没有找到替代方法。当你需要指定“colspanned”列的宽度时，必须要用到它。

下面是一个相当简洁的代码片段，用来说明此问题，包含了两行三列的表格。中间的列从未用“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>

- Eric Grange

你能澄清一下你认为渲染有错误的地方吗？无论是在Google Chrome还是Firefox 114.0，我都看不出两者结果有任何差异。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cskwg · Accepted Answer

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

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

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