首頁 >web前端 >css教學 >如何在具有固定寬度列的表格中使用可變寬度列的百分比?

如何在具有固定寬度列的表格中使用可變寬度列的百分比?

Susan Sarandon
Susan Sarandon原創
2024-11-16 02:59:03972瀏覽

How to Use Percentages for Variable Width Columns in Tables with Fixed Width Columns?

在表中使用calc():一種替代解決方案

當嘗試使用calc() 函數實現固定寬度和可變寬度的表列時,可能會出現以下情況:遇到限制。在表格中,calc() 函數不支援寬度計算的百分比。

要克服這個挑戰,請考慮採用不同的方法:

  1. 設定表格佈局attribute: 透過將表格的table-layout 屬性設為「 fixed”,強制列遵守特定寬度。此外,為表格分配 100% 的寬度。
  2. 刪除 calc() 並使用百分比: 其餘欄位使用普通百分比,而不是 calc()。確定固定寬度的列並指派它們的寬度。剩餘空間將按比例分配在相對寬度的列中。

CSS 範例:

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

td.album {
    width: 20%;
}

重點:

  • 重點:
  • 重點>將表格版面配置為「固定”可確保列寬一致到指定的值。
使用相對寬度列的百分比可以讓剩餘空間按比例分配。

Display:table 是表格版面工作所必需的,但它阻止了使用桌子的高度。

<table border="0">
修改範例程式碼:

以上是如何在具有固定寬度列的表格中使用可變寬度列的百分比?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn