How to Set the Maximum Width of Table Cells with Percentages?

Setting Max-Width of Table Cells with Percentages

In the pursuit of optimizing table layouts, questions arise regarding the manipulation of individual table cells. One such question pertains to setting the maximum width of a table cell using percentages. Despite efforts, attempts such as the example provided often fail to achieve the desired effect.

The solution to this challenge lies in the CSS property table-layout: fixed. By applying this property to the table in question, the subsequent max-width property will take effect as intended.

CSS Code:

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

Updated HTML:

<table class="fixed-table">
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

CSS Style Sheet:

.fixed-table td {
  max-width: 67%;
}

By utilizing this combination of CSS properties and attributes, you can now set the maximum width of any table cell using percentages, ensuring a more refined and responsive table layout.

The above is the detailed content of How to Set the Maximum Width of Table Cells with Percentages?. For more information, please follow other related articles on the PHP Chinese website!