如何使用 CSS Calc() 和表格布局在表格中实现灵活的列宽？

使用 CSS Calc 的表格中的灵活列宽

在追求具有固定宽度和灵活宽度列的表格时，使用单独使用 CSS calc() 函数可能会达不到要求。表格根据单元格内容强制执行特定的空间分配规则，这使得 calc() 均匀分配可用空间变得具有挑战性。

为了克服这个障碍，我们可以使用 table-layout 属性设置为固定的表元素。这确保了子 td 元素遵循我们定义的宽度。此外，必须为表格指定宽度（例如 100%）。

为了使表格布局生效，表格还必须具有表格的显示类型。这是默认设置，通常被省略。不过，为了完整起见，将其包含在此处。

现在，我们可以自由地使用百分比来调整剩余列的宽度。例如：

td.title, td.interpret {
  width: 40%;
}

td.album {
  width: 20%;
}

考虑固定宽度列后的剩余空间分布在具有相对宽度的列之间。

需要注意的一个警告是，对表使用 display: table意味着我们不能再定义表格的高度（或最小高度或最大高度）。

下面是包含这些的修改示例修复：

以上是如何使用 CSS Calc() 和表格布局在表格中实现灵活的列宽？的详细内容。更多信息请关注PHP中文网其他相关文章！