www.webdeveloper.com
Results 1 to 5 of 5

Thread: tbody scroll for explorer

  1. #1
    Join Date
    Jul 2005
    Posts
    197

    tbody scroll for explorer

    i wanted to make a TBODY scroll that works for both FF and IE.
    in FF no probs, just: "height:300px;overflow:auto;" on the tbody and it works.

    IE is a different story.
    my problem began when i decided my table had to be flexibale !
    all sulotions i found neede fixed width for the TDs - no good.

    so i came up with this:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <
    html>
    <
    head>
    <
    meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <
    title>website</title>
    <
    style type='text/css'>
    body{
    padding:0;
    margin20px;
    fontnormal 13px arialsans-serif;
    }

    table.TableMain{
    border1px solid black;
    }

    thead tr thtfoot tr th{
    background-color#996600;
    }

    .
    scrollTable th, .scrollTable td{
    padding5px;
    bordersolid black;
    border-width0 1px 1px 0;
    }

    .
    scrollTablewidth:100% }

    .
    scrollTable tbody{
    height:300px;
    overflow:auto;
    }

    .
    scrollTable .th_extra{
    width18px;
    padding0;
    border-right-width0;
    }

    .
    TableContainer > .scrollTable .th_extrawidth19px; }

    </
    style>
    <!--[if 
    IE]>
    <
    style type="text/css">
    div.TableContainer {
        
    height300px;
        
    overflowauto;
        
    width100%;
    }

    thead.fixedHeader tr {
        
    positionrelative;
    }
    .
    scrollTable{widthexpression(this.parentNode.offsetWidth-17);}
    .
    th_extra{display:none;}
    </
    style>
    <![endif]-->

    </
    head>

    <
    body>

    <
    table border='0' cellspacing='0' cellpadding='0' class='TableMain' width='60%'>
    <
    tr>
    <
    td>
    <
    div class="TableContainer">
    <
    table border='0' cellspacing='0' cellpadding='0' class="scrollTable"
        <
    thead class="fixedHeader">
            <
    tr>
              <
    th>wkdjchlkj</th>
              <
    th>khwdgc9376</th>
              <
    th>76235uyg</th>
                <
    th>yg</th>
                <
    th class='th_extra'></th>
            </
    tr>
        </
    thead
        <
    tfoot>
            <
    tr>
              <
    th>wkdjchlkj</th>
              <
    th>khwdgc9376</th>
              <
    th>76235uyg</th>
                <
    th>7</th>
                <
    th class='th_extra'></th>
            </
    tr>
        </
    tfoot
        <
    tbody class="scrollContent">
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
            <
    tr>
                <
    td>1111111111</td>
    <
    td>JAh RAsta</td>
                <
    td>222</td>
                <
    td>444444444444</td>
            </
    tr>
        </
    tbody
    </
    table>
    </
    div>

    </
    td>
    </
    tr>
    </
    table>

    </
    body>
    </
    html
    this is the best i could think of.
    i used an expression there bkuz otherwise the scroll is partlly hidden by the THEAD (ie of course).
    delete the expression line to see.
    and - when the most outer table (TableMain) dont have width to it the scroll is still hidden.

    could u think of a better way? without the expression?

  2. #2
    Join Date
    Jul 2005
    Posts
    197
    hello?

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  4. #4
    Join Date
    Jul 2005
    Posts
    197
    obviously u havent look what my code does.
    i use an IE bug:
    "In WinIE 6.x, any element with a position property set to relative and is a child of an element that has an overflow property set, the relative value translates into fixed."

    please read my first post.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Take out the expression and try it this way:
    Code:
    tbody {display:block; display:table-row-group;} /* IE and FF */

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles