How can a table size based on its content

Question

How can I have a table have the size of its content even if the parent is smaller?

Have a look at this sample: http://jsfiddle.net/GtVx8/3/

The first table is 150px wide while the second one is 200px. How can I make the first table be 200px with the following restrictions?

The enclosing div must be 150px wide.
The table should not set its own width.

I think this will help you http://stackoverflow.com/questions/5179962/how-to-auto-resize-html-table-cell-to-fit-the-text-size — jcvegan, Dec 01 '11 at 01:44

pna · Answer 1 · 2011-12-01T03:36:22.357

Not sure i've understand the question but you can force the table width as <table width="200">

EDIT: then wrap everything in a div container and give the table container an 100% width like

<div>
<div style="width:100%">
    <table >
        <tr style="display:block">
            <td style="width:100px;background:red">hello</td>
            <td style="width:100px;background:green">world</td>
        </tr>
    </table>
</div>
<div style="width:200px">
    <table>
        <tr>
            <td style="width:100px; background:red">hello</td>
            <td style="width:100px; background:green">world</td> 
        </tr>
    </table>
</div>
</div>

How can a table size based on its content

1 Answers1