首頁 >web前端 >css教學 >如何使用百分比設定表格儲存格的最大寬度?

如何使用百分比設定表格儲存格的最大寬度?

Patricia Arquette
Patricia Arquette原創
2024-11-13 01:58:02640瀏覽

How to Set Max-Width for Table Cells Using Percentages?

使用百分比設定表格儲存格的最大寬度

使用表格儲存格的百分比設定最大寬度限制可能很棘手。考慮以下範例:

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

在這種情況下,max-width 設定不會生效。那麼,我們如何使用百分比來實現這一目標?

解涉及利用表格元素上的 table-layout 屬性。透過將其設為固定,我們可以按比例調整表格單元格的大小:

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

此CSS規則確保表格寬​​度佔據整個可用空間,並且表格單元格調整其寬度因此。現在將遵守各個單元格的百分比最大寬度設定。

範例:

<table>

透過新增table-layout: 固定,最大寬度限制因為第二個表格儲存格被有效應用,減少了其相對於父表格的寬度。

以上是如何使用百分比設定表格儲存格的最大寬度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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