Scrolling table with fixed header...Safari issues...

RIRedinPA · November 4, 2009

I got the code though a search of this site and it works fine in FF 3.5.4 and IE6/7 but it does not work in Safari 4.0.3. In Safari instead of the overflow being hidden the entire table can be seen. In FF and IE you can see to row 4 and then the rest is hidden. Is there a fix I am missing for Safari?


<html>
<head>
	<title>Scroll Table With Fixed Headers | test 3</title>

	<!--CSS Link-->
	<style type='text/css'>

	/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
	div.FixedTableHead {
   			overflow-y:auto;
   			/* this fixes IE so container width is same as table width */
   			width: expression( (this.childNodes[0].clientWidth + 24) + 'px' );
   			/* This fixes IE so the container height is table height plus the height of the header */
   			height: expression( (parseInt(this.childNodes[0].style.height) + this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
   			position: relative; 
   			top: 100px;
   			left: 100px;
	}

	/* Scrollable Content */
	.FixedTableHead table tbody {
   			height:100%;
   			overflow-x:hidden;
   			overflow-y:auto;
	}

	.FixedTableHead table tbody tr {
   			height: auto;
   			white-space: nowrap;
	}	

	/* Prevent Mozilla scrollbar from hiding right-most cell content */
	.FixedTableHead table tbody tr td:last-child {
   			padding-right: 20px;
	}

	/* Fixed Header */
	/* In WinIE any element with a position property set to relative and is a child of       */
	/* an element that has an overflow property set, the relative value translates into fixed.    */
	/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
	.FixedTableHead table thead tr {
   			position: relative;
   			height: auto;
   		/* this fixes IE header jumping bug when mousing over rows in the tbody */
   			top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
	}

	/* Fixed Header */
	.FixedTableHead table thead tr td {
   			border-bottom:1px solid #000000;
   			background-color:white;
	}
</style>


</head>
<body>

  		<div class='FixedTableHead'>
		<table cellspacing=0 style='height:100px;'>
		<thead>
			<tr><td>ID</td></tr>
		</thead>
		<tbody>
		<?php
			for($e=0; $e<20; $e++) {
				print "<tr><td>" . $e . "</td></tr>"; 
			}  
		?>
		</tbody>
		</table>
	</div>
</body>
</html>

RIRedinPA · November 5, 2009

It seems like webkit is unwilling to play nice in this sandbox so I changed tact and dropped trying to show the data in a table and went instead with a series of unordered list. It seems so far to work fine, though I need additional functionality and have to populate everything from database calls where I won't know upfront how many header fields I will have. But this is a good first step. Here's the code if anyone want to view it, tweak it or criticize it. (If you tweak it publish it so others can benefit).

Tested in FF 3.5.4, Safari 4.0.3 and IE7, I have a captured audience so I'm not testing for backwards compatibility.

One issue I could use help with is in Safari I get a horizontal scroll bar which is both unwanted and unneeded.

<style>

	* { 
		margin: 0;
		padding: 0;
	}

	#header { 
		position: relative; 
		top: 40px;
		left: 100px;
	}

	#header ul { 
		list-style-type: none;
		width: 800px;
		height: 25px;

	}

	#header li { 
		float: left; 
		width: 150px;
		height: 25px;
		background-color: #eee;
		border: 1px solid #333;
		text-indent: 3px;
	}

	#content { 
		position: absolute; 
		top: 75px;
		left: 100px;
		height: 300px;
		overflow-y: scroll; 
	}

	#content ul { 
		list-style-type: none;
		width: 766px;
	}

	#content li {
		float: left; 
		height: 25px;
		width: 150px;
		border: 1px solid #eee; 
		text-indent: 3px;
	}

	#content a { 
		text-decoration: none;
		width: 150px;
	}

	#content a:active, a:live { 
		color: #333;
	}

	#content a:visited { 
		color: #333; 
	}

	#content a:hover { 
		color: #ff4433;
	}


</style>
<body>

<div id="header">
	<ul>
		<li>Item1</li>
		<li>Item2</li>
		<li>Item3</li>
		<li>Item4</li>
		<li>Item5</li>
</div>
<div id="content">

	<?php 
		for ($r=0; $r<20; $r++) {
			print "<ul><li><a href=\"javascript:void(0);\" onmousedown=\"updatedb();\">R" . $r  ."C1</li><li><a href=\"javascript:void(0);\" onmousedown=\"updatedb();\">R" . $r  ."C2</li><li><a href=\"javascript:void(0);\" onmousedown=\"updatedb();\">R" . $r  ."C3</li><li><a href=\"javascript:void(0);\" onmousedown=\"updatedb();\">R" . $r  ."C4</li><li><a href=\"javascript:void(0);\" onmousedown=\"updatedb();\">R" . $r  ."C5</li></ul>";
		}
	?>
<div>

Sign In

Scrolling table with fixed header...Safari issues...

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information