Table overflows

HTML & CSS
1

I have a layout with tabular data, and the table is expanding outside of the layout.

The “real” data can’t be line wrapped any more than it already is, but it is still too wide for a 1024x768 resolution. I’m perfectly fine with horizontal scrolling, but when that happens, the table breaks out of the layout and the layout just stops at the edge of the original viewable area.

Is there a way to let the divs contain the table so things like background color actually go 100% width?

example below, and I’m using the sticky footer found here: http://www.cssstickyfooter.com/

<html>
<head>
<style type="text/css">
/* start reset code */
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 100.01%;
    color: black;
}
p { margin: .2em 0 .8em 0; }
ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
ul, ol { margin-top: .2em; margin-bottom: .8em; }

a img { border: none; }
td img { vertical-align: bottom; }
thead td img { display:inline; }

table { width: 100%; }
td.smallest, table.smallest { width: 0px; }

.left1 { text-align: left; margin: 0 auto; }
img.left1 { float: left; }

.right1 { text-align: right; margin: auto 0; }
img.right1 { float: right; }

.center1, img.centerimage { text-align: center; margin: 0 auto; }
table.center1  { margin-left: auto; margin-right: auto; text-align:inherit;}

.center_element { margin: 0 auto; }

.nowrap { white-space: nowrap; }

.underline, .u { text-decoration:underline; }

.clearfix:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix { display:inline-block; }

/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */

/* end reset code */


/* start sticky footer code */
html, body {height: 100%;}
#wrap {min-height: 100%;}

#main {
    padding-bottom: 25px; /* must be same height as the footer */
}  

#footer {
    position: relative;
    margin-top: -25px; /* negative value of footer height */
    height: 25px;
    clear:both;
} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

<!--[if lt IE 7]>#wrap {display:table;height:100%}<![endif]-->
/* end  sticky footer code */


#logo, #nav, #content, #navhead {
    width: 100%;
}

#logo {
    padding: 12px 16px 12px 16px;
    font-size: 1.3em;
    font-weight: bold;
    white-space: nowrap;
}

#navhead {
    background-color: #ccc;
}

#nav {
    white-space: nowrap;
}

#nav span {
    background-color: white;
    border: 1px solid blue;
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1em;
    padding: 2px 4px 2px 4px;
    display: inline-block;
    margin: 0px 8px;
    white-space: nowrap;
}

#search {
    padding: 18px 12px 4px 12px;
    white-space: nowrap;
}


#content {
    border: 1px solid red;
    padding: 18px 5%;
}

#content table {
    border-collapse: collapse;
    margin: 
}
#content table td {
    border: 1px solid blue;
}

#footer {
    font-size: .8em;
    font-style: italic;
}
</style>


</head>
<body>
    <div id="wrap">

        <div id="main">
            <div id="navhead">
                <div id="logo">yehaw logo!</div>
                <div id="nav"><span>link one</span><span>link two</span><span>link three</span><span>link some more</span><span>link five</span></div>
            </div>
            <div id="search"><form><input type="text" />&nbsp;<button>Search</button></form></div>
            <div id="content">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>datadatadatadatadatadatadatadatadata</td>
                        <td>datadatadata datadatadatadata datadatadatadatadata</td>
                        <td>ddatadatadatadatadadatadatadatadatadatadatatadata</td>
                        <td>data datadatadata datadatadatada tadatadatadata</td>
                        <td>datadatadatadatadatadata</td>
                    </tr>
                    <tr>
                        <td>data data datadatadatadatada tadatadata</td>
                        <td>data datadatadata data</td>
                        <td>datadatadata datadatadata data</td>
                        <td>data data data</td>
                        <td>data datadatadata data</td>
                    </tr>
                </table>
            </div>
        </div>

    </div>

    <div id="footer" class="center1">Groovy version info 1.0.0</div>
</body>
</html>
2

Found a bug with IE7…the vertical scrollbars appear.

Here’s the fix for a separate conditional stylesheet for IE7:

#content div { overflow:visible; overflow-x:auto; overflow-y:hidden; padding-bottom:15px; }
3

Tables are quirky with overflow:auto because they are naturally expandable to meet the content

Try overflow:auto on a <tbody> (and have a height set)

Only gecko will honor that, it’s not very x-browser compatible :slight_smile:
Glad you found a solution though :slight_smile:

4

I used the doctype for HTML5.

table-layout broke the table. The cell contents overlapped each other.

I ended up wrapping a div around the table and just applied overflow:auto to that.

Not the way I would’ve liked to have solved it, but it’s better than letting the layout break.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* start reset code */
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 100.01&#37;;
    color: black;
}
p { margin: .2em 0 .8em 0; }
ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
ul, ol { margin-top: .2em; margin-bottom: .8em; }

a img { border: none; }
td img { vertical-align: bottom; }
thead td img { display:inline; }

table { width: 100%; }
td.smallest, table.smallest { width: 0px; }

.left1 { text-align: left; margin: 0 auto; }
img.left1 { float: left; }

.right1 { text-align: right; margin: auto 0; }
img.right1 { float: right; }

.center1, img.centerimage { text-align: center; margin: 0 auto; }
table.center1  { margin-left: auto; margin-right: auto; text-align:inherit;}

.center_element { margin: 0 auto; }

.nowrap { white-space: nowrap; }

.underline, .u { text-decoration:underline; }

.clearfix:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix { display:inline-block; }

/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */

/* end reset code */


/* start sticky footer code */
html, body {height: 100%;}
#wrap {min-height: 100%;}

#main {
    padding-bottom: 25px; /* must be same height as the footer */
}  

#footer {
    position: relative;
    margin-top: -25px; /* negative value of footer height */
    height: 25px;
    clear:both;
} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

<!--[if lt IE 7]>#wrap {display:table;height:100%}<![endif]-->
/* end  sticky footer code */


#logo, #nav, #content, #navhead {
    width: 100%;
}

#logo {
    padding: 12px 16px 12px 16px;
    font-size: 1.3em;
    font-weight: bold;
    white-space: nowrap;
}

#navhead {
    background-color: #ccc;
}

#nav {
    white-space: nowrap;
}

#nav span {
    background-color: white;
    border: 1px solid blue;
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1em;
    padding: 2px 4px 2px 4px;
    display: inline-block;
    margin: 0px 8px;
    white-space: nowrap;
}

#search {
    padding: 18px 12px 4px 12px;
    white-space: nowrap;
}


#content {
    border: 1px solid red;
    padding: 18px 5%;
}

#content div {
    overflow: auto;
}

#content table {
    border-collapse: collapse;    
}
#content table td {
    border: 1px solid blue;
}

#footer {
    font-size: .8em;
    font-style: italic;
}
</style>


</head>
<body>
    <div id="wrap">

        <div id="main">
            <div id="navhead">
                <div id="logo">yehaw logo!</div>
                <div id="nav"><span>link one</span><span>link two</span><span>link three</span><span>link some more</span><span>link five</span></div>
            </div>
            <div id="search"><form><input type="text" />&nbsp;<button>Search</button></form></div>
            <div id="content"><div>
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>datadatadatadatadatadatadatadatadata</td>
                        <td>datadatadata datadatadatadata datadatadatadatadata</td>
                        <td>ddatadatadatadatadadatadatadatadatadatadatatadata</td>
                        <td>data datadatadata datadatadatada tadatadatadata</td>
                        <td>datadatadatadatadatadata</td>
                    </tr>
                    <tr>
                        <td>data data datadatadatadatada tadatadata</td>
                        <td>data datadatadata data</td>
                        <td>datadatadata datadatadata data</td>
                        <td>data data data</td>
                        <td>data datadatadata data</td>
                    </tr>
                </table></div>
            </div>
        </div>

    </div>

    <div id="footer" class="center1">Groovy version info 1.0.0</div>
</body>
</html>

[edit]: oops, looks like I didn’t copy the first line in the first post, hence the lack of doctype.

5

Try adding table-layout:fixed to that (and add a doctype because you need one :))

6

Putting overflow:auto on the table element didn’t do anything.

Gosh, I miss layouts using tables :frowning:

7

Why not just set a scroll on the table rather than the entire page so that it doesn’t extend outside its container.

8

Unfortunately no, that’s just the way CSS works. Width auto/100% will only go to the edge of the viewing screen (before scrollbars) and once scrollbars are added in, the content (aka header in this case) won’t go beyond that width and start covering the scrollbar.

Why can’t the real data be wrapped?