如何使用 calc() 创建具有固定宽度和可变宽度列的表格？

在表格中使用 calc()：固定宽度和可变宽度列

在尝试创建具有固定宽度和可变宽度的表格时 -如果使用 CSS calc() 函数调整宽度列，您可能会遇到百分比 (%) 的问题。表格具有特定的空间分配规则，导致 calc() 不兼容。

使用 table-layout 的解决方案：

要解决此问题，请将 table-layout 属性设置为fixed对于桌子。这会强制表的子元素 (td) 遵守指定的宽度。此外，将表格的显示设置为表格并提供宽度。

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}

基于百分比的列：

对于其余列，使用普通百分比而不是计算()。容纳固定宽度列后的剩余空间将在这些列之间按比例分配。

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

注意：

要使用此解决方案，表格显示必须设置为表格，这会阻止您设置高度。

已修改示例：

这是原始代码的修改版本：

<table border="0">

以上是如何使用 calc() 创建具有固定宽度和可变宽度列的表格？的详细内容。更多信息请关注PHP中文网其他相关文章！