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