www.webdeveloper.com
Results 1 to 13 of 13

Thread: Fixed Header for tables

  1. #1
    Join Date
    Jan 2010
    Posts
    47

    Fixed Header for tables

    Iam new to CSS coding and I wrote a code for the creation of table. I knew "position:fixed" will work for static header, but I dont know where you keep that. Could any one help me. Here is my code..

    <div id="scrollingtable" style="height:180px;width:94.5em;">
    <table summary="This Table displays the following..." style="font-size:9pt;width:103.5em;">
    <colgroup>
    <col class="center" style="width:2em" />
    <col class="center" style="width:2em" />
    <col class="center" style="width:8em" />
    <col class="center" style="width:12em" />
    <col class="center" style="width:28em" />
    <col class="center" style="width:28em" />
    <col class="center" style="width:10em" />
    <col class="center" style="width:8em" />
    <col class="center" style="width:6em" />
    </colgroup>
    <thead>
    <tr>
    <th align="center" scope="col"></th>
    <th scope="col">No.</th>
    <th scope="col" title="Filter Id" align="center">Filter Id</th>
    <th class="<%=checkStyle%>" align="center" scope="col" title="itms number">Check Name</th>
    <th scope="col" title="Check Value" align="center">Check Value</th>
    <th scope="col" title="Check Item" align="center">Check Item</th>
    <th scope="col" title="Check Type" align="center">Check Type</th>
    <th scope="col" title="expiration date">Expiration Date</th>
    <th scope="col" title="filter status">Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"></td>
    </tr>
    </tbody>
    </table>
    </div>

    <style type="text/css">


    #scrollingtable {
    width: auto;
    overflow: hidden;
    border:1px solid #000000;
    clear: both;
    }
    #scrollingtable table {

    background-color: #FFF;
    width:100%;
    height: auto;
    }
    #scrollingtable table caption {
    display: none;
    }
    #scrollingtable thead th {
    border:0;
    }
    #scrollingtable tbody {
    height: 210px;
    overflow: -moz-scrollbars-vertical;
    }
    * html body #scrollingtable tbody {
    height: 1%;
    overflow: auto;
    }
    #scrollingtable table tbody td {
    border-right: solid 1px #CCC;
    border-left: solid 1px #CCC;
    }
    #scrollingtable table tbody .alternate_row, .alternate_row {
    background-color: #EEEEEE;
    }
    #scrollingtable table tbody td, #scrollingtable table tbody .alternate_row td {
    border-top: none;
    border-bottom: none;

    }

    </style>

  2. #2
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    Something like this?

    Code:
    <html>
    <head>
    <style type="text/css">
    
    
    #scrollingtable {
    width: auto;
    overflow: hidden;
    border:1px solid #000000;
    clear: both;
    }
    #scrollingtable table {
    background-color: #FFF;
    width:100%;
    height: auto;
    }
    #scrollingtable table caption {
    display: none;
    }
    #scrollingtable thead th {
    border:0;
    }
    #scrollingtable tbody {
    height: 210px;
    overflow: -moz-scrollbars-vertical;
    }
    * html body #scrollingtable tbody {
    height: 1%;
    overflow: auto;
    }
    #scrollingtable table tbody td {
    border-right: solid 1px #CCC;
    border-left: solid 1px #CCC;
    }
    #scrollingtable table tbody .alternate_row, .alternate_row {
    background-color: #EEEEEE;
    }
    #scrollingtable table tbody td, #scrollingtable table tbody .alternate_row td {
    border-top: none;
    border-bottom: none;
    
    }
    
    </style> 
    </head>
    <body>
    <div id="scrollingtable" style="height:180px;width:94.5em;">
    <table summary="This Table displays the following..." style="font-size:9pt;width:103.5em; postion:fixed; top:0; left:0;">
    <colgroup>
    <col class="center" style="width:2em" />
    <col class="center" style="width:2em" />
    <col class="center" style="width:8em" />
    <col class="center" style="width:12em" />
    <col class="center" style="width:28em" />
    <col class="center" style="width:28em" />
    <col class="center" style="width:10em" />
    <col class="center" style="width:8em" />
    <col class="center" style="width:6em" />
    </colgroup>
    <thead>
    <tr>
    <th align="center" scope="col"></th>
    <th scope="col">No.</th>
    <th scope="col" title="Filter Id" align="center">Filter Id</th>
    <th class="<%=checkStyle%>" align="center" scope="col" title="itms number">Check Name</th>
    <th scope="col" title="Check Value" align="center">Check Value</th>
    <th scope="col" title="Check Item" align="center">Check Item</th>
    <th scope="col" title="Check Type" align="center">Check Type</th>
    <th scope="col" title="expiration date">Expiration Date</th>
    <th scope="col" title="filter status">Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    <tr>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    <td align="center">sadasdas</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Jan 2010
    Posts
    47
    Thanks for the reply, but it didnt work when I integrated in my code. Any other suggestions please
    Last edited by manojkmi; 06-02-2010 at 10:43 AM.

  4. #4
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    I used the same code you posted and made revisions to that code. Please post the code you have now.

  5. #5
    Join Date
    Jan 2010
    Posts
    47
    Here is the actual code I have...

    PHP Code:
    <div id="scrollingtable" style="height:180px;width:93em;margin:10px 0 0px 9px;overflow-x:hidden;">
            <
    table summary="This Table displays the following..."
                
    style="font-size:9pt;width:102em;">
                <
    colgroup>        
                    <
    col class="center" style="width:2em" />
                    <
    col class="center" style="width:2em" />
                    <
    col class="center" style="width:8em" />
                    <
    col class="center" style="width:12em" />
                    <
    col class="center" style="width:28em" />
                    <
    col class="center" style="width:26em" />
                    <
    col class="center" style="width:10em" />
                    <
    col class="center" style="width:8em" />
                    <
    col class="center" style="width:6em" />
                </
    colgroup>
                <
    thead>
                    <
    tr>
                        <
    th align="center" scope="col">
                            <
    input name="checkAllRows"
                                
    type="checkbox" value="allrows" onclick="changeCheckBoxValues(true)" />
                        </
    th>
                        <
    th scope="col">No.</th>
                        <
    th scope="col" title="Filter Id" align="center">Filter Id</th>
                        <
    th class="<%=checkStyle%>" align="center" scope="col" title="itms number">
                            <
    class="blueStyle" href="javascript:sortData('<%=checkSortField%>')">Check Name</a>
                        </
    th>                
                        <
    th scope="col" title="Check Value" align="center">Check Value</th>
                        <
    th scope="col" title="Check Item" align="center">Check Item</th>
                        <
    th scope="col" title="Check Type" align="center">Check Type</th>                
                        <
    th class="<%=dateStyle%>" align="center" scope="col" title="expiration date">
                            <
    class="blueStyle" href="javascript:sortData('<%=dateSortField%>')">Expiration Date</a>
                        </
    th>                    
                        <
    th class="<%=statusStyle%>" align="center" scope="col" title="filter status">
                            <
    class="blueStyle" href="javascript:sortData('<%=statusSortField%>')">Status</a
                        </
    th>                    
                    </
    tr>
                </
    thead>
                <
    tbody>
                
                 <
    logic:iterate id="filterDtoList" name="filterSetMgmtForm"
                                    
    property="filterMgmtSearchDto.filterDtoList" indexId="counter"
                                    
    type="com.ford.its.ehpas.dto.FilterDto">
                    <%
                           
    String rowClass2 =
                           
    counter.intValue() % == "" "alternate_row";
                        %>
                    <
    tr class="<%=rowClass2%>">
                    <
    td align="center"><input type="checkbox" name="row"
                                
    value="<bean:write name="filterDtoList" property="id"/>"/></td>
                    <
    td align="center">
                                <%=
    counter.intValue() + 1%>
                    </
    td>
                    <
    td align="center"><a href="javascript:void(0)" class="softwareStyle"
                                
    onclick="openFilterDetailWindow('<%=counter.intValue() + 1%>',
                                         '<bean:write name="
    filterDtoList" property="id"/>')">
                             <
    span id="name<%=counter.intValue()+ 1%>"><bean:write name="filterDtoList" property="id"/></span> </a>
                    </
    td>
                    <
    td align="center">                    
                         <
    bean:write name="filterDtoList" property="check" />                    
                    </
    td>
                    <
    td align="center">                    
                         <
    bean:write name="filterDtoList" property="value" />                    
                    </
    td>
                    <
    td align="center">                    
                         <
    bean:write name="filterDtoList" property="item" />                    
                    </
    td>
                    <
    td align="center">                    
                         <
    bean:write name="filterDtoList" property="type" />                    
                    </
    td>
                    <
    td align="center">    <span id="date<%=counter.intValue()+ 1%>">                
                         <
    bean:write name="filterDtoList" property="expirationDate" />    </span>                
                    </
    td>
                    <
    td align="center">                    
                         <
    bean:write name="filterDtoList" property="status" />                    
                    </
    td>                    
                    
                    </
    tr>
                    </
    logic:iterate>
                </
    tbody>    
            </
    table>
        </
    div

  6. #6
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    You didn't add my style revisions to the <table summary> section, so of course my code isn't gonna work.

  7. #7
    Join Date
    Jan 2010
    Posts
    47
    I added this "position:fixed; top:0; left:0" in the mentioned position, no luck thats why i removed that from my code.

  8. #8
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    Can you post the code from a resulting table you get, that way I can run diagnostics with pure HTML code.

  9. #9
    Join Date
    Jan 2010
    Posts
    47
    PHP Code:
    <div id="scrollingtable" style="height:180px;width:93em;margin:10px 0 0px 9px;overflow-x:hidden;">
            <
    table summary="This Table displays the following..."
                
    style="font-size:9pt;width:102em;">
                <
    colgroup>        
                    <
    col class="center" style="width:2em" />
                    <
    col class="center" style="width:2em" />
                    <
    col class="center" style="width:8em" />
                    <
    col class="center" style="width:12em" />
                    <
    col class="center" style="width:28em" />
                    <
    col class="center" style="width:26em" />
                    <
    col class="center" style="width:10em" />
                    <
    col class="center" style="width:8em" />
                    <
    col class="center" style="width:6em" />
                </
    colgroup>
                <
    thead>
                    <
    tr>
                        <
    th align="center" scope="col">
                            <
    input name="checkAllRows"
                                
    type="checkbox" value="allrows" onclick="changeCheckBoxValues(true)" />
                        </
    th>
                        <
    th scope="col">No.</th>
                        <
    th scope="col" title="Filter Id" align="center">Filter Id</th>
                        <
    th class="sortable sortedbydown" align="center" scope="col" title="itms number">
                            <
    class="blueStyle" href="javascript:sortData('CHECK_NAME')">Check Name</a>
                        </
    th>                
                        <
    th scope="col" title="Check Value" align="center">Check Value</th>
                        <
    th scope="col" title="Check Item" align="center">Check Item</th>
                        <
    th scope="col" title="Check Type" align="center">Check Type</th>                
                        <
    th class="sortable" align="center" scope="col" title="expiration date">
                            <
    class="blueStyle" href="javascript:sortData('EXPIRES_ON')">Expiration Date</a>
                        </
    th>                    
                        <
    th class="sortable" align="center" scope="col" title="filter status">
                            <
    class="blueStyle" href="javascript:sortData('FILTER_STATUS')">Status</a
                        </
    th>                    
                    </
    tr>
                </
    thead>
                <
    tbody>
                
                 
                    
                    <
    tr class="">
                    <
    td align="center"><input type="checkbox" name="row"
                                
    value="502664"/></td>
                    <
    td align="center">
                                
    1
                    
    </td>
                    <
    td align="center"><a href="javascript:void(0)" class="softwareStyle"
                                
    onclick="openFilterDetailWindow('1',
                                         '502664')"
    >
                             <
    span id="name1">502664</span> </a>
                    </
    td>
                    <
    td align="center">                    
                         
    BANNER EXISTS                    
                    
    </td>
                    <
    td align="center">                    
                         /
    etc/vsftpd.conf                    
                    
    </td>
                    <
    td align="center">                    
                                             
                    </
    td>
                    <
    td align="center">                    
                                             
                    </
    td>
                    <
    td align="center">    <span id="date1">                
                             </
    span>                
                    </
    td>
                    <
    td align="center">                    
                         
    REQUEST                    
                    
    </td>                    
                    
                    </
    tr>
                    
                    
                    <
    tr class="alternate_row">
                    <
    td align="center"><input type="checkbox" name="row"
                                
    value="502724"/></td>
                    <
    td align="center">
                                
    2
                    
    </td>
                    <
    td align="center"><a href="javascript:void(0)" class="softwareStyle"
                                
    onclick="openFilterDetailWindow('2',
                                         '502724')"
    >
                             <
    span id="name2">502724</span> </a>
                    </
    td>
                    <
    td align="center">                    
                         
    BANNER EXISTS                    
                    
    </td>
                    <
    td align="center">                    
                         /
    etc/issue.net                    
                    
    </td>
                    <
    td align="center">                    
                                             
                    </
    td>
                    <
    td align="center">                    
                                             
                    </
    td>
                    <
    td align="center">    <span id="date2">                
                             </
    span>                
                    </
    td>
                    <
    td align="center">                    
                         
    REQUEST                    
                    
    </td>                    
                    
                    </
    tr>

    More <tr>.....

    <
    tr class="">
                    <
    td align="center"><input type="checkbox" name="row"
                                
    value="502765"/></td>
                    <
    td align="center">
                                
    23
                    
    </td>
                    <
    td align="center"><a href="javascript:void(0)" class="softwareStyle"
                                
    onclick="openFilterDetailWindow('23',
                                         '502765')"
    >
                             <
    span id="name23">502765</span> </a>
                    </
    td>
                    <
    td align="center">                    
                         
    WORLD WRITEABLE                    
                    
    </td>
                    <
    td align="center">                    
                         /
    opt/CA/SharedComponents/ca_lic                    
                    
    </td>
                    <
    td align="center">                    
                         
    licrmt.pid                    
                    
    </td>
                    <
    td align="center">                    
                                             
                    </
    td>
                    <
    td align="center">    <span id="date23">                
                             </
    span>                
                    </
    td>
                    <
    td align="center">                    
                         
    REQUEST                    
                    
    </td>                    
                    
                    </
    tr>
                    
                </
    tbody>    
            </
    table>
        </
    div

  10. #10
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    Is this what your looking for?
    (right after your colgroup)
    <thead style="position:fixed; top:0; left:0;">

  11. #11
    Join Date
    Jan 2010
    Posts
    47
    Yes, I kept that one and tried but no use..Thanks for replying

  12. #12
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    Okay, then I'm not understanding what your trying to do. This code will fix the top row to the top of the screen, while allowing all the other rows to scroll beneath it normally (much like freezing a pane in excel). Sorry I couldn't help out. Maybe someone else is able to.

  13. #13
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Is this what you are looking for?
    Table body scrolling is a little more difficult that one might expect.
    but here's a starting point.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    <head><title>untitled</title>
    <style type="text/css">
    #scrtbl {
    	border:1px solid #000
    }
    #scrtbl th {
    	text-align:left;
    	border-bottom:1px solid #000
    }
    </style>
    </head>
    
    <body>
    <table id="scrtbl" cellspacing="0" cellpadding="1" border="0">
    <thead>
    <tr><th>col 1 heading</th><th>col 2 heading</th><th>col 3 heading</th><th>&nbsp;&nbsp;</th></tr>
    </thead>
    <tbody>
    <tr><td colspan=4>
    	<div style="width:620px; height:80px; overflow-y:auto;">
    	<table width="600" cellspacing="0" cellpadding="1" border="0">
    	<tr><td>col 1 data 1</td><td>col 2 data 1</td><td>col 3 data 1</td></tr>
    	<tr><td>col 1 data 2</td><td>col 2 data 2</td><td>col 3 data 2</td></tr>
    	<tr><td>col 1 data 3</td><td>col 2 data 3</td><td>col 3 data 2</td></tr>
    	<tr><td>col 1 data 4</td><td>col 2 data 4</td><td>col 3 data 4</td></tr>
    	<tr><td>col 1 data 5</td><td>col 2 data 5</td><td>col 3 data 5</td></tr>
    	<tr><td>col 1 data 6</td><td>col 2 data 6</td><td>col 3 data 6</td></tr>
    	</table>  
    	</div>
    </td></tr>
    </tbody>
    </table>
    
    </body>
    </html>

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