How to Set Max-Width for Table Cells Using Percentages?

Setting Max-Width for Table Cells with Percentages

Setting a max-width constraint using percentages for table cells can be tricky. Consider the following example:

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

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

In this case, the max-width setting does not take effect. So, how can we achieve this using percentages?

The Solution

The solution involves utilizing the table-layout property on the table element. By setting it to fixed, we can resize the table cells proportionally:

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

This CSS rule ensures the table width takes up the entire available space, and the table cells adjust their width accordingly. The percentage max-width settings for individual cells will now be honored.

Example:

<table>

By adding table-layout: fixed, the max-width limitation for the second table cell is effectively applied, reducing its width relative to the parent table.

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