css - 表格中的某些列以百分比表示，其余为液体

我有一个表，其中两列将分别接收30%的空间：

<td style="width: 30%;">

其余的列应公平地共享剩余的空间。我该如何完成？我是否只给其余的列不加width吗？

最佳答案

是的，声明没有宽度是可行的（请参见下面的代码段）。

除非另行声明（例如<td>），否则<td style="width: 30%;"></td>自动自动平均调整宽度

编辑

当您将数据放入流体单元中时，它们将适应内部数据的大小。为了使它们彼此之间保持相同的宽度并环绕文本，您需要声明流体单元的宽度百分比。

因为我们已经在前两个单元格中使用了60％，所以剩下40％。我们需要将40除以多余单元格的数量，以获得其宽度的百分比值。

感谢@Chiller指出这一点！

table {
  height: 500px;
  width: 100%;
}

td {
  background: red;
  /* Edit - divide number of fluid cells by 40
  (because we're using 60% with the first two)
  in this example the number is just over 13) */
  width: 13%; /* the number we calculated */
}

<table>
  <tr>
    <td style="width: 30%;"></td>
    <td style="width: 30%;"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

关于css - 表格中的某些列以百分比表示，其余为液体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44431184/