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

Setting the Maximum Width of Table Cells Using Percentages

This enquiry addresses a recurring issue faced by developers: setting the maximum width of table cells using percentages. The provided HTML and CSS example illustrates this problem.

While the CSS property max-width is typically used for controlling the width of elements, it initially failed to function as expected on table cells. How can this limitation be overcome to set the maximum width of table cells using percentages?

The key to unlocking this functionality lies in the table-layout property. By setting table-layout: fixed on the table tag, the table is instructed to allocate a specific width to each cell. This allows for accurate control over cell widths, including the use of percentages.

Consider the following CSS example:

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

td {
  max-width: 67%;
}

Now, the table cells will adhere to the maximum width specified by the max-width property, ensuring that overly long text doesn't overflow and disrupt the table's layout. This technique is compatible with modern browsers and offers a reliable solution for managing table cell widths using percentages.

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