Zach Lesperance Zach Lesperance - 4 months ago 20
HTML Question

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 it's most basic level.

Thanks in advance

Answer

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