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 st

Solution 1:

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

Solution 2:

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;    
}

<divstyle="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>

Solution 3:

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

table-layout:auto;

Idea from another Stackoverflow question