CSS - display tably in scrolling div with static header

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

CSS - display tably in scrolling div with static header

Post 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
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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>
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I'm sorry - I meant "display: block;"

But it works?
Post Reply