Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Table Overflowing Containing Div In Html

Post a Comment
I have a table which overflows its containing div. I want to show all the contents in the table, so the table has to go over 100% width to do so. The problem is the containing div

Solution 1:

You should consider using table-layout: fixed and some width on the table or cells.

Relevant CSS:

table {
    table-layout: fixed;
    min-width: 960px;
}

table-layout: fixed is the other table layout algorithm where browser stick to what the author (you) want and don't try anymore to adapt dimensions to the content. That works if you've some indication of width wanted, like a min-width: http://jsfiddle.net/qg75arbs/1/

A simple min-width on table without table-layout: fixed also works, depends on your requirement.

Removing table { word-break: break-all; } also works, seems strange to allow this while trying to have large cells.

Solution 2:

Add this to your #content css if you want the table to push out the containing div.

display: table-cell;

Solution 3: 

<html><head><title>Test</title><styletype="text/css">

body, table, td {
    color      : #1D1F22;
}


#content {
    padding: 10px;
    /*overflow: hidden; */
    background-color:red;
    }

.border {
    background-color: #4385DB;
    color           : #4385DB;
}

table
{
    word-break: break-all;
    width:100%;
}

.img1 {
    min-width:200px;
    width:100%;
    height:auto;
}

@media(min-width: 800px) {
    #content {
        width        : 98%;
    }
}

</style></head><body><divid="content"><tablecellpadding="7"cellspacing="1"class="border"><tr><td>VeryLongBitOfTextVeryLongBitOfText</td><td>VeryLongBitOfTextVeryLongBitOfText</td><td><imgsrc="dogs.jpg"class="img1"alt="trev"></td><td>VeryLongBitOfTextVeryLongBitOfText</td></tr></table></div></body></html>

Solution 4:

I think the problem here is that the table will only shrink down to as small as the content (most of the time) and in this case you will note that each column has got to it's smallest size (1 character width), with a static width image.

In essence, the table element is not really responsive as much as you want and becomes static at a smaller size. You can scale the image or hide columns below a certain width but if you do use a table element it will always only shrink down to a certain size.

Post a Comment for "Table Overflowing Containing Div In Html"