CODEWITHSUNDEEP
htmlcsshtml-table
Zach Lesperance
Zach Lesperance

Reputation: 347

Table width exceeds container's width

I'm working on a reporting application which generates HTML tables that can be many rows high and many columns long (sometimes 40 or more).

The problem is, many of these tables stretch outside of their containing div, and it just looks ugly. For some reason, the containing div won't stretch to the size of the table.

So, here's my question: Is it possible to make a containing element stretch to the width of the table using CSS?

Here's a jfiddle with the problem at its most basic level.

Upvotes: 3

Views: 8018

Answers (3)

user6632262
user6632262

Reputation: 21

just put <div style="overfow:auto"><table> and happy coding

div{
    border:2px solid #F00;
    padding:10px;    
}
table{
    border:2px solid #00F;    
}
td, th{
    border:1px solid #00F;
    padding:4px;    
}
<div style="overflow: auto">
    <table>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
        </tr>
    </table>
</div>

Upvotes: 2

Haoyu Chen
Haoyu Chen

Reputation: 1810

Consider about another method -- Set table-layout as fixed in your table class:

table-layout:auto;

Idea from another Stackoverflow question

Upvotes: 0

Turnip
Turnip

Reputation: 36632

Give your container a float to force it to stretch to the width of the content:

div{
    border:2px solid #F00;
    padding:10px;   
    float: left; 
}

Fiddle

Upvotes: 3

Related Questions