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

问题:

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

回答1:

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:

And the CSS:

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

文章来源: How to make a table cell shrink width to fit only its contents?