使用CSS Calc 的表格中的靈活列寬
在追求具有固定寬度和靈活寬度列的表格時,使用單獨使用CSS calc() 函數可能會達不到要求。表格根據單元格內容強制執行特定的空間分配規則,這使得 calc() 均勻分配可用空間變得具有挑戰性。
為了克服這個障礙,我們可以使用 table-layout 屬性設定為固定的表格元素。這確保了子 td 元素遵循我們定義的寬度。此外,必須為表格指定寬度(例如 100%)。
為了使表格版面配置生效,表格也必須具有表格的顯示類型。這是預設設置,通常被省略。不過,為了完整起見,將其包含在此處。
現在,我們可以自由地使用百分比來調整剩餘列的寬度。例如:
td.title, td.interpret { width: 40%; } td.album { width: 20%; }
考慮固定寬度列後的剩餘空間分佈在具有相對寬度的列之間。
需要注意的一個警告是,對錶使用 display: table意味著我們不能再定義表格的高度(或最小高度或最大高度)。
以下是包含這些的修改範例修復:
<table border="0">
以上是如何使用 CSS Calc() 和表格佈局在表格中實現靈活的列寬?的詳細內容。更多資訊請關注PHP中文網其他相關文章!