fixed column header using 2 tables in a div

Question

I load 2 tables (header and data) dynamically into a div. I want the header table to remain fixed while the data row is scrollable.

What do I have to set in these tables to accomplish this?

Or is there a better way of doing it?

check out http://stackoverflow.com/questions/8235169/do-not-scroll-table-headings-when-scrolling-down-a-html-table — Yogurt The Wise, Jun 21 '12 at 14:31
Or perhaps - http://stackoverflow.com/questions/643340/freeze-th-header-and-scrolling-data — Chris Barlow, Jun 21 '12 at 14:32

score 0 · Accepted Answer · answered Jun 21 '12 at 14:45

Better way of doing this is to use jQuery plugin jquery.fixheadertable.js Or you can make one table that contains one row that have header only i.e <th> and other with rows that have data only i.e <td>

    <table cellspacing="1" cellpadding="5">
        <tr>
            <th width="140">Heading 1</th>  
            <th width="140">Heading 2</th>
            <th width="140">Heading 3</th>
        </tr>
</table>
<table cellspacing="1" cellpadding="5">
    <tr>
        <th width="140"></th>   
        <th width="140"></th>
        <th width="140"></th>
    </tr>
    <tr>
        <td>Data 1</td> 
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

this is a template code. I had tried this and this will work out your requirement.

fixed column header using 2 tables in a div

1 Answers1