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

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

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

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