How to make a table cell shrink width to fit only its contents?

Question

I want the table to have 100% width, but only one column from it should have a free width, like:

| A | B | C                                                                  |

so the width of A and B columns should match the width of their contents, but the width of C should go on until the table ends.

Ok I could specify the width of of A and B in pixels, but the problem is that the width of the contents of these columns is not fixed, so if I set a fixed width it wouldn't match the contents perfectly :(

PS: I'm not using actual table items, but a DL list wrapped in a div. The div has display:table, dl has display:table-row, and dt/dd display:table-cell ...

Is the data that you have tabular in nature.? If so there is no reason for you to not use tables. — Jawad, Dec 29 '12 at 17:42
Related: http://stackoverflow.com/questions/4582631/are-shrink-to-fit-table-cells-possible — Timo Huovinen, Apr 07 '14 at 13:53

score 27 · Accepted Answer · answered Dec 29 '12 at 18:39

If I understood you, you have tabular data but you want to present it in the browser using div elements (AFAIK tables and divs with display:table behaves mostly the same).

(here is a working jsfiddle: http://jsfiddle.net/roimergarcia/CWKRA/)

The markup:

<div class='theTable'>
    <div class='theRow'>
        <div class='theCell' >first</div>
        <div class='theCell' >test</div>
        <div class='theCell bigCell'>this is long</div>
    </div>
    <div class='theRow'>
        <div class='theCell'>2nd</div>
        <div class='theCell'>more test</div>
        <div class='theCell'>it is still long</div>
    </div>
</div>

And the CSS:

.theTable{
    display:table; 
    width:95%; /* or whatever width for your table*/
}
.theRow{display:table-row}
.theCell{
    display:table-cell;
    padding: 0px 2px; /* just some padding, if needed*/
    white-space: pre; /* this will avoid line breaks*/
}
.bigCell{
    width:100%; /* this will shrink other cells */
}

The sad part is I couldn't do this one year ago, when I really needed it -_-!

Please, notice that adding `table-layout:fixed` to the main div will break this css. — Roimer, Dec 29 '12 at 18:48
`white-space: nowrap` might be better. If you have a ul list inline in a cell the `pre` option causes to stack up - at least in a real table tag. — cyberwombat, Apr 14 '15 at 18:29
What do you do if you need to span one cell across multiple rows? How do you apply your solution to that? — Rares Oltean, May 15 '15 at 11:52

score -1 · Answer 2 · answered Aug 23 '22 at 14:40

Here, a more modern solution via width: max-content. Works with actual tables and display: tables

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

.small-cell {
  width: max-content;
}

td {
  border: 1px solid black;
}

/* --- */

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

.display-table > * {
  display: table-row;
}

.display-table > * > * {
  display: table-cell;
  border: 1px solid black;
}

<h2>HTML Table</h2>

<table>
  <tr>
    <td class="small-cell">A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

<h2>Display: Table</h2>

<div class="display-table">
  <dl>
    <dt class="small-cell">Lorem Ipsum</dt>
    <dd>Dolor Sit Amet</dd>
  </dl>
  <dl>
    <dt class="small-cell">Foo</dt>
    <dd>Bar</dd>
  </dl>
</div>

How to make a table cell shrink width to fit only its contents?

2 Answers2

Linked