How to Effectively Control Table Cell Maximum Width with Percentages?

Expanding CSS Max-Width Capabilities for Table Cells: Leveraging Percentages

In the realm of HTML tables, it's often desirable to control the maximum width of table cells, especially when dealing with lengthy text or ensuring cross-device compatibility. However, setting max-width using percentages can sometimes encounter limitations.

In the given code snippet:

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

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

Applying max-width as a percentage to table cells would intuitively adjust their widths accordingly. However, browser compatibility issues can arise, resulting in inconsistent rendering.

To overcome these limitations, there's a lesser-known solution: the 'table-layout' CSS property. By setting 'table-layout: fixed' on the table tag, we can establish a fixed-width layout for all cells within it. This provides a consistent and reliable method to control the maximum width of cells using percentages.

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

With this approach, the maximum width of cells can be effectively controlled using percentages, regardless of browser compatibility issues. Refer to the following updated Fiddle to witness it in action: http://jsfiddle.net/Fm5bM/4/.

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