SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: table overflows

  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    table overflows

    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/

    Code:
    <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>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately no, that's just the way CSS works. Width auto/100&#37; 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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why not just set a scroll on the table rather than the entire page so that it doesn't extend outside its container.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Putting overflow:auto on the table element didn't do anything.

    Gosh, I miss layouts using tables
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try adding table-layout:fixed to that (and add a doctype because you need one )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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.


    Code:
    <!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.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Glad you found a solution though
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Found a bug with IE7...the vertical scrollbars appear.

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

    Code:
    #content div { overflow:visible; overflow-x:auto; overflow-y:hidden; padding-bottom:15px; }
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •