CODEWITHSUNDEEP
csshtml-table
Aerik
Aerik

Reputation: 2317

How can I make a div stretch to include a contained table?

I have a table that is sometimes wider than the div it is inside – this causes my table to go outside the div border.

How can I make the div stretch so the div border always goes around the table?

This fiddle shows the problem if you shrink the result pane.

div#wrapper{
    margin: 2em;
    padding: 1em;
    border: 1px solid black;
    width: auto;
}

<div id="wrapper">
    <table border="1">
        <tr>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
        </tr>
    </table>

Upvotes: 2

Views: 760

Answers (1)

Adrift
Adrift

Reputation: 59779

Changing the display value of div#wrapper to inline-block is one way:

div#wrapper {
    margin: 2em;
    padding: 1em;
    border: 1px solid black;
    display: inline-block;
}

fixed jsFiddle

Upvotes: 5

Related Questions