CSS - display tably in scrolling div with static header
Posted: Wed Nov 14, 2007 2:58 am
Hi all,
Just trying to create an ajax page which calls a table in a div when some search parameters are altered.
The AJAX part is working fine, but what I want is to have a scrollbar on my div so that the whole table can be scrolled inside it, but also have a way to make the heading row and caption stick at the top.
So from the calling page ...
The CSS ...
And an example of the table going into the div ...
So yeah ... Can anyone offer an advice on making the caption and header row stay at the top of the dive, with the rest of the table scrolling underneath inside the div?
Cheers
Just trying to create an ajax page which calls a table in a div when some search parameters are altered.
The AJAX part is working fine, but what I want is to have a scrollbar on my div so that the whole table can be scrolled inside it, but also have a way to make the heading row and caption stick at the top.
So from the calling page ...
Code: Select all
<input type="button" value="update" onclick="new Ajax.Updater('chart', 'includes/ajax/tbl_nmi.php?orderby=6', { method: 'get' });" />
<div id='chart'>( retrieving data ... )</div>Code: Select all
#chart {
width: 90%;
height: 300px;
overflow: auto;
margin: 0px auto;
border: 1px solid #CCCCCC;
}Code: Select all
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#969696">
<caption class="static">This is a caption</caption>
<tr class="static">
<th>NMI</th>
<th>TYPE</th>
<th>LOCATION</th>
<th>DEPARTMENT</th>
<th>USAGE (KWH)</th>
</tr>
<tr class="plain" onmouseover="this.className='hilite';" onmouseout="this.className='plain';" onclick="alert('you clicked <?php echo $result_row['M_PK']; ?>');">
<td><?php echo $result_row['M_PK']; ?></td>
<td><?php echo $result_row['type_name']; ?></td>
<td><?php echo $result_row['address']; ?></td>
<td><?php echo $result_row['dept_name']; ?></td>
<td><?php echo $result_row['usage']; ?></td>
</tr>
</table>
Cheers