20

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 ...

Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
thelolcat
  • 10,155
  • 19
  • 59
  • 100

1 Answers1

27

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 -_-!

Roimer
  • 1,384
  • 1
  • 18
  • 25
  • 7
    Please, notice that adding `table-layout:fixed` to the main div will break this css. – Roimer Dec 29 '12 at 18:48
  • 3
    `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