如何使用百分比设置表格单元格的最大宽度？

使用百分比设置表格单元格的最大宽度

使用表格单元格的百分比设置最大宽度约束可能很棘手。考虑以下示例：

<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中文网其他相关文章！