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

【问题标题】：Dynamic size of even cells (nth cell ) in a table row表格行中偶数单元格（第 n 个单元格）的动态大小
【发布时间】：2013-05-09 16:06:37
【问题描述】：

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

|cell1|cell2       |cell3|cell4        |

另一个假想的行

|cell1|cell2            |cell3|cell4           |

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

【问题讨论】：

你是如何使用类的？为什么不能使用固定宽度？

标签： css cell css-tables

【解决方案1】：

不，您需要每行都成为自己的表才能做到这一点。

//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>

【讨论】：

【解决方案2】：

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

/*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%; 
}

【讨论】：