85

How can I make the table with 2 columns (cells) look like this:

  • First cell is shrink according to the content
  • The other cell fits the rest of the table (wider than both contents together)

Example:

<table style="width: 500px;">
   <tr>
      <td>foo</td>
      <td>bar</td>
   </tr>
</table>

I need the table to look like this:

.___________________________________________________________________________.
| foo | bar            <a lot of space here>                                |
|_____|_____________________________________________________________________|
                           500 px total width

Notice: I don't know the width of "foo" so I cannot set "50px", "10%" or something like that.

3
  • set a width like 10px.... e.g. <td width="10">foo</td> Jul 10, 2012 at 12:35
  • 2
    Well, it's right at the bottom of my post. I don't know the width of the cell so I can't set it manually. I need the browser to shrink accodring to the content ("foo" in my example, but it may be "foooooooooo" which is too long for 10px).
    – Pavel S.
    Jul 10, 2012 at 12:36
  • 5
    even if you set a 10px width, the cell will grow according to content. See fiddle here: jsfiddle.net/7X4XT/2 Jul 10, 2012 at 12:45

4 Answers 4

106

Set the width to anything near zero, to shrink it, then set the white-space to nowrap. Solved.

td {
width:0.1%;
white-space: nowrap;
} 
5
  • 6
    Thanks! Interestingly, a width of 0 doesn’t have any effect, but your 0.1% appears to be a nice hack to achieve this. Jun 9, 2017 at 1:31
  • 5
    personally, I went with width: 1px. great idea Nat!
    – SnailCoil
    Jul 21, 2017 at 17:51
  • 3
    @SnailCoil The 1px doesn't work when other columns are using percentages that are adding up to less than 100%. My columns can be dynamically hidden so they can't always add to 100% (and didn't want to recalculate). Nat's answer works great and fixes a problem I've had for over a year.
    – Turbo
    Dec 5, 2019 at 23:29
  • to save others the trouble, this seems to have the same problem with table-layout: fixed as above Aug 2, 2021 at 22:33
  • This is buggy as hell and works who knows how. With column width of 100% when I do this on the last cell of the row, it starts to overflow outside the table itself.
    – KulaGGin
    Dec 12, 2022 at 13:33
66

You can set the width of the second cell to 100%

HTML:

<table>
   <tr>
      <td>foo</td>
      <td class="grow">bar</td>
   </tr>
</table>​

CSS:

table { width: 500px; }
.grow { width: 100%; }​

Check this fiddle out.

6
  • 31
    This only works if table-layout is set to auto on the table. This is the default, but it's common to set table-layout to fixed, which will cause the 100% value to be taken literally (the cell will span the entire table, and all cells will overlap).
    – Zenexer
    Oct 8, 2013 at 5:05
  • when I resize the fiddle window containing the html output, it does not grow at all.
    – kiltek
    May 16, 2018 at 8:32
  • <table style='white-space:nowrap'> shrink it to the content. Don't set width on the first cell!
    – user985399
    May 19, 2019 at 22:53
  • Thanks for this answer, this is what I used. As an aside, I know you didn't intend this (and probably don't care since this question and answer has nothing to do with Tailwind), but grow reminded me of Tailwind's grow attribute for flexbox. I had to do a double take to see that it was setting the width to full.
    – kevlar
    Aug 16, 2023 at 16:51
  • Hey @kevlar! Sorry I just saw this comment :( When I answered Tailwind didn't even exist, this is a veeeery old question :P
    – scumah
    Dec 12, 2023 at 21:49
5

Set this:

td {
    max-width:100%;
    white-space:nowrap;
}

This will solve your problem.

1
  • Nice solution for compact data, but doesn't work so well if you happen to require longer content to wrap in one cell Nov 14, 2019 at 16:18
1

If the total size of the table is 500 pixels and will not pass, put td{max-width: 500px;}; If the minimum value is 500 pixels, td {min-width: 500px;}; Look this exemple.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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