Page 1 of 1

CSS - display tably in scrolling div with static header

Posted: Wed Nov 14, 2007 2:58 am
by Stryks
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 ...

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>
The CSS ...

Code: Select all

#chart {
	width: 90%;
	height: 300px;
	overflow: auto;
	margin: 0px auto;
	border: 1px solid #CCCCCC;
}
And an example of the table going into the div ...

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>
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

Posted: Wed Nov 14, 2007 6:24 am
by Kieran Huggins
you could try using a tbody tag and styling it with a height and "display: box; overflow: auto;", but I doubt that will work.

You'll probably have to simulate it with a lot of bloat.

Posted: Wed Nov 14, 2007 1:17 pm
by Weirdan
with display:box that doesn't work. With no 'display' that does, at least in ff2:

Code: Select all

<table>
  <thead>
    <tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>
  </thead>
  <tbody style="overflow: auto; height: 80px;">
     <tr><td>1</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
     <tr><td>2</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
     <tr><td>3</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
     <tr><td>4</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
     <tr><td>5</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>       
     <tr><td>6</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>     
     <tr><td>7</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>     
     <tr><td>8</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>     
     <tr><td>9</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>     
     <tr><td>10</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
  </tbody>
</table>

Posted: Thu Nov 15, 2007 12:36 am
by Kieran Huggins
I'm sorry - I meant "display: block;"

But it works?