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?

Answer 1

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.