如何使用 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中文網其他相關文章！