css - 表格行中偶数单元格（第 n 个单元格）的动态大小

Question

我有一个表格，每行有四个单元格。我可以让第二个和第四个单元格扩展，而不改变其他单元格的宽度吗？这可以在不为第一个和第三个单元格设置固定宽度的情况下完成吗，因为我想使用一个类？

|cell1|cell2       |cell3|cell4        |

另一个假想的行

|cell1|cell2            |cell3|cell4           |

编辑：这是我想要达到的结果。单元格 2 和单元格 4 应该具有相同的宽度，如果可能的话，它应该是动态的，具体取决于窗口大小。单元格 1 和 2 也应具有相同的宽度。这两个例子不是针对同一张桌子的，它们只是为了说明这个想法。

Answer 1

您可以使用 % 使其相对于容器动态，例如：

/*Second and fourth cells*/
div#containerId table td:first-child + td,
div#containerId table td:first-child + td + td + td
{
    width: 30%; 
}
/*First and third cells*/
div#containerId table td:first-child,
div#containerId table td:first-child + td + td
{
    width: 10%; 
}

Answer 2

不，你需要每一行都是它自己的表才能做到这一点。

//row 1
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
  </tr>
</table>

//row2
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
  </tr>
</table>