Jump to content

Freezing a header row

ShadowMage

By ShadowMage
in CSS

Recommended Posts

ShadowMage Devoted Member

ShadowMage

Posted
Posted

Hey guys, need a little help here. I have a bunch of data, which is organized into a table. Here's the code which prints it out:

echo "<div id='editor'>\n";	echo "<div id='colHdrs'>\n<table><tr>\n";	foreach ($arrColumns as $Column) {		echo "<th>".$Column['Field']."</th>";	}	echo "\n</tr></table>\n</div>\n";	echo "<div id='data'>\n<table>\n";	foreach ($arrRecords as $index => $Record) {		echo "<tr>\n";		foreach ($Record as $Field => $Value) {			echo "<td>".$Value."</td>";		}		echo "\n</tr>\n";	}	echo "</table>\n</div>\n";echo "</div>\n";

What I need is for the colHdrs row to stay put when I scroll vertically, but scroll when I scroll horizontally.I've tried several different ways. Here is my latest, with absolute positioning, but the colHdrs div still scrolls vertically.

#editor {	position: relative;	overflow: auto;	padding-top: 5px;	height: 700px;}#editor th {	padding: 0px 4px;}#editor #data {	height: 650px;}#editor #colHdrs {	position: absolute;	top: 0px;	left: 0px;	white-space: nowrap;}

I've also tried it using the overflow-x and overflow-y properties but it always adds a horizontal scrollbar to the data div instead of the div expanding like it should. Any way to accomplish this task?

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
  • Author
Posted

Ok I've managed to get it working in FF. IE still doesn't play ball, though. :)Here's what I have now:HTML Source:

<div id='editor'><div class='scrollTblContainer'><table><thead class='colHdrs'><tr><th>QuoteNum</th>...</tr></thead><tbody class='data'><tr><td>53343</td>...</tr>...</tbody></table></div></div>

CSS:

div.scrollTblContainer {	overflow: auto;}thead.colHdrs tr {	display: block;}tbody.data {	display: block;	height: 650px;	overflow: auto;}

Anybody know how to get this to work in IE? (Specifically 8)

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

i tried your example, but could not get it to work in FF either? came up with this rough working example in FF and IE8 using position fixed. needs tidying up but seems to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">div.scrollTblContainer {	overflow: auto;}table, table tr, table thead, table tbody{width:960px;}thead.colHdrs tr th, tbody.data tr td{border:2px solid #A0A0A4;width:325px;}thead.colHdrs, thead.colHdrs tr { position:fixed; z-index:999; top:8px; }tbody.data {position:relative; z-index:0;}.hideScrollData {background-color:#fff; height:50px; position:fixed;overflow:hidden;width:100%;top:-20px; z-index:99}</style></head><body><div id="editor"><div class='scrollTblContainer'><div class="hideScrollData"></div><table border="1" cellpadding="0" cellspacing="0"><thead class='colHdrs'><tr><th>th1</th><th>th2</th><th>th3</th></tr></thead><tbody class='data'>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  <tr>	<td>1</td>	<td>2</td>	<td>3</td>  </tr>  <tr>	<td>4</td>	<td>5</td>	<td>6</td>  </tr>  </tbody></table></div></div></body></html>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
  • Author
Posted
i tried your example, but could not get it to work in FF either? came up with this rough working example in FF and IE8 using position fixed. needs tidying up but seems to work.
Thanks, dsonesuk. Weird you couldn't get that to work....it works just fine in FF for me. :) Well, anyway, I don't really want to use fixed position, but I suppose it could work. I've decided to go a little different route with my project, though, because the scrolling table just wasn't working very well. Because it's in a container, and the table is wider than the container, it scrolls in both directions, which means that the vertical scrollbar was hidden unless I scrolled all the way over. The only way to scroll down (if you didn't have a scrollwheel on your mouse) was to scroll to the right, scroll down, then scroll back to the left to view the information in the first few columns. It was just a mess.Thanks to everyone here who helped me though! Appreciate it guys.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...