136
<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?

3
  • 1
    Please expand upon "does not work".
    – Sparky
    Commented Dec 11, 2011 at 16:58
  • 1
    You have to make sure the PARENT of your td has a specific width (be it that you pass width: 100%; all the way from body to your td, or you could give the parent (here: tr) 1000px or whatever you prefer. When using %% in css it always uses the exact px defined in the parent and then transforms the px into %% for the children, as they have a size relative to their parent. Commented Sep 17, 2015 at 12:56
  • For the record, max-width now works in Safari and Chrome. I am not sure how long it has been supported for.
    – Jay
    Commented Aug 30, 2019 at 6:36

7 Answers 7

151

Old question I know, but this is now possible using the css property table-layout: fixed on the table tag. Answer below from this question CSS percentage width and text-overflow in a table cell

This is easily done by using table-layout: fixed, but a little tricky because not many people know about this CSS property.

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

See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/

9
  • 2
    Thanks! I was afraid fixed means it won't recalculate the width of cells which don't have any width set, but luckily that is not the case.
    – fassl
    Commented Jul 4, 2015 at 18:38
  • @shanzilla If you have no-wrap on the cells, or the text is one unbroken string that's longer, then yes it will spill over. But using auto layout has similar and different problems as well. Just depends what you need. You can ellipses it though with text-overflow: ellipsis; and can also add a scroll bar. CSS-Tricks as a great write up: css-tricks.com/fixing-tables-long-strings Commented Mar 19, 2017 at 18:51
  • 6
    In your jsfiddle if I remove the width properties the max-width still does not work so not sure how this solves the problem.
    – frezq
    Commented Jul 23, 2017 at 13:49
  • 8
    @superphonic I think you're confused. If you remove the max-width in that jsfiddle, the width will remain the same so it's not the max-width that sets it. It might be clearer if you replace it with a max-width: 10% for the first td... you'll see that it does not change. jsfiddle.net/w3f8ey22/1
    – frezq
    Commented Jul 24, 2017 at 21:07
  • 6
    this answer is misleading as it is not related to the question Commented Oct 16, 2018 at 11:04
89

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.

4
  • Actually max-width works in Safari and Chrome now. I am not sure how long it has been supported for.
    – Jay
    Commented Aug 30, 2019 at 6:36
  • @Jay, if it works, there are unknown for me conditions when it works. Commented Dec 2, 2020 at 9:19
  • 2
    @TakeshiTokugawaYD, it seems that max-width for td is respected (to some degree) if width is also set AND width and max-width both have either length units or percentage units. With table-layout:fixed it is respected without regards to the content.
    – Superole
    Commented Jan 26, 2022 at 11:56
  • Still true in the CSS 2.2 Working draft
    – Simon
    Commented Apr 28, 2022 at 6:59
9

I know this is literally a year later, but I figured I'd share. I was trying to do the same thing and came across this solution that worked for me. We set a max width for the entire table, then worked with the cell sizes for the desired effect.

Put the table in its own div, then set the width, min-width, and/or max-width of the div as desired for the entire table. Then, you can work and set width and min-widths for other cells, and max width for the div effectively working around and backwards to achieve the max width we wanted.

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}

.tdleft {
    width:20%;
    min-width:200px;
}
<div id="tablediv">
  <table width="100%" border="1">
    <tr>
      <td class="tdleft">Test</td>
      <td>A long string blah blah blah</td>
    </tr>
  </table>
</div>

Admittedly, this does not give you a "max" width of a cell per se, but it does allow some control that might work in-lieu of such an option. Not sure if it will work for your needs. I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days.

1
  • This is a non-answer. It does not address the OP at all. Commented Mar 19, 2022 at 20:34
1

the percent should be relative to an absolute size, try this :

table {
  width:200px;
}

td {
  width:65%;
  border:1px solid black;
}
<table>
  <tr>
    <td>Testasdas 3123 1 dasd as da</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>
    

0
1

I have found a solution for my project, how cells to be dynamic width, like (width:min-content) behavior. Maybe you can use this trick to limit your cell.

table {
  width: 100%;
  border: 1px solid black;
}


 table td {
    width: 100%;
}
 table td:first-child {
    width: auto;
    white-space: nowrap;
}
 table td:nth-child(2) {
    width: auto;
    white-space: nowrap;
}

table, th, td {
  border: 1px solid black;
  padding-right: 5px;
}

td:last-child {
  padding-right: unset;
}
      <table>
        <tbody>
          <tr>
            <td >
              <div class="">dymaic cell</div>
            </td>
            <td>one way</td>
            <td>sweater, jumper,worm</td>
            <td class="text-right">
              <button></button>
            </td>
          </tr>
          <tr>
            <td >
              <div class="">dymaic text</div>
            </td>
            <td>one way</td>
            <td>sweater, jumper,worm</td>
            <td class="text-right">
              <button></button>
            </td>
          </tr>
          <tr>
            <td >
              <div class="">dymaic text ,, very long</div>
            </td>
            <td>two ways</td>
            <td>sweater, jumper,worm , jumper,worm</td>
            <td class="text-right">
              <button></button>
            </td>
          </tr>
        </tbody>
      </table>

JSFiddle preview

0

The solution I've found is to use a div inside the td with the following CSS properties:

max-width: 300px; // Desired max width
width: max-content;

You can set the width of a different td to be 100% which will take the remaining space in the table.

0

This works in Chrome... just set the width attribute on the td tag.

td width=600px

Not the answer you're looking for? Browse other questions tagged or ask your own question.