Search code examples
htmlcsshtml-table

How can I set the max-width of a table cell using percentages?

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

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

The above does not work. How can I set the max-width of a table cell using percentages?

Solution

  • According to the definition of max-width in the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.

    If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case

    td:first-child { width: 33% ;}

    Setting that for both columns won’t work that well, since it tends to make browsers give the columns equal width.