anonym: IE HTML TABLE SCROLL WITH FIXED HEADER

Beitrag lesen

Meine valiante:
den code herauskopieren und als htm-Datei speichern ... mit dem IE anschauen.

Viel Spaß

  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  
<head>  
<title>Scrollable Table with Fixed Header</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
  
<style type="text/css">  
<!--  
body {  
	background-color: buttonface;  
}  
  
div.scrolltable {  
	border:solid 1px gray;  
	overflow:hidden;  
}  
  
div.tcaption {  
	background-color:activecaption;  
	color:captiontext;  
	font-weight:bold;  
	font-size:10pt;  
	white-space:nowrap;  
	overflow:hidden;  
	padding-left: 3px; padding-right: 3px;  
}  
  
div.thead {  
	position:relative;  
	background-color:red;  
}  
div.thead table {  
	border-collapse: collapse;  
}  
div.thead th {  
	color:white;  
	font-weight:bold;  
	white-space:nowrap;  
	padding-left: 3px; padding-right: 3px;  
	border-right: 1px solid gray;  
	border-bottom: 1px solid gray;  
}  
  
div.tbody {  
	width:100%;  
	overflow:auto;  
	background-color:white;  
}  
div.tbody table {  
	border-collapse: collapse;  
}  
div.tbody table td {  
	color:blue;  
	font-weight:normal;  
	white-space:nowrap;  
	padding-left: 3px; padding-right: 3px;  
	border-right: 1px solid gray;  
	border-bottom: 1px solid gray;  
}  
  
-->  
</style>  
</head><body>  
  
<div class="scrolltable" style="width:300px; height:200px;">  
  
	<div class="tcaption" id="tbody2c">  
	table_name_x  
	</div>  
	  
	<div class="thead" id="tbody2h">  
	<table>	  
	<tr><th>Header1</th>  
		<th>Header2</th>  
		<th>Header3</th>  
		<th>Header4</th>  
		<th>Header5</th>  
		<th>Header6</th></tr>  
	</table>  
	</div>  
	  
	<div class="tbody" id="tbody2" onscroll="tbody2h.style.left = -this.scrollLeft;">  
	<table>  
	<tr><td>r1col1</td>  
		<td>r1col2</td>  
		<td>r1col3</td>  
		<td>r1col4</td>  
		<td>r1col5</td>  
		<td>r1col6</td></tr>  
	<tr><td>r2col1</td>  
		<td>r2col2</td>  
		<td>r2col3</td>  
		<td>r2col4</td>  
		<td>r2col5</td>  
		<td>r2col6</td></tr>  
	<tr><td>r3col1</td>  
		<td>r3col2</td>  
		<td>r3col3</td>  
		<td>r3col4</td>  
		<td>r3col5</td>  
		<td>r3col6</td></tr>  
	<tr><td>r4col1</td>  
		<td>r4col2</td>  
		<td>r4col3</td>  
		<td>r4col4</td>  
		<td>r4col5</td>  
		<td>r4col6</td></tr>  
	<tr><td>r5col1</td>  
		<td>r5col2</td>  
		<td>r5col3</td>  
		<td>r5col4</td>  
		<td>r5col5</td>  
		<td>r5col6</td></tr>  
	<tr><td>r6col1</td>  
		<td>r6col2</td>  
		<td>r6col3</td>  
		<td>r6col4</td>  
		<td>r6col5</td>  
		<td>r6col6</td></tr>  
	<tr><td>r7col1</td>  
		<td>r7col2</td>  
		<td>r7col3</td>  
		<td>r7col4</td>  
		<td>r7col5</td>  
		<td>r7col6</td></tr>  
	<tr><td>r8col1</td>  
		<td>r8col2</td>  
		<td>r8col3</td>  
		<td>r8col4</td>  
		<td>r8col5</td>  
		<td>r8col6</td></tr>  
	<tr><td>r9col1</td>  
		<td>r9col2</td>  
		<td>r9col3</td>  
		<td>r9col4</td>  
		<td>r9col5</td>  
		<td>r9col6</td></tr>  
	<tr><td>r10col1</td>  
		<td>r10col2</td>  
		<td>r10col3</td>  
		<td>r10col4</td>  
		<td>r10col5</td>  
		<td>r10col6 wert 100</td></tr>  
	</table>  
	  
	</div>  
</div>  
  
<script type="text/javascript">  
window.onload = function() { setSize(); }  
  
function setSize() {  
	try {  
		var dhead, thead, tbody = null;  
		var divs = document.getElementsByTagName("div");  
		  
		for (t=0; t< divs.length; t++) {  
			if (divs[t].className != "tbody") { /*alert("exit: className "+ divs[t].className +" != tbody");*/ continue; }  
			if (! divs[t].id) { alert("exit: no id"); continue; }			  
			if (! divs[t].id.match(/^tbody\d+$/)) { alert("exit: id not match /^tbody\\d+$/"); continue; }  
			  
			divs[t].style.height = divs[t].parentNode.clientHeight - divs[t].offsetTop;  
			  
			dhead = document.getElementById(divs[t].id + "h");  
			if (! dhead) { alert("exit: No header table div found"); continue; }  
			  
			tbody = divs[t].getElementsByTagName("table")[0];  
			if (! tbody) { alert("exit: No body table found"); continue; }  
			  
			thead = dhead.getElementsByTagName("table")[0];  
			if (! thead) { alert("exit: No header table found"); continue; }  
			  
			cols = tbody.rows[0].cells.length;			  
			for (c=0; c< cols; c++) {  
				if (thead.rows[0].cells[c].clientWidth > tbody.rows[0].cells[c].clientWidth) {  
					tbody.style.width = tbody.clientWidth + thead.rows[0].cells[c].clientWidth - tbody.rows[0].cells[c].clientWidth;  
					tbody.rows[0].cells[c].style.width = (thead.rows[0].cells[c].clientWidth-6) +"px";  
				} else {  
					thead.rows[0].cells[c].style.width = (tbody.rows[0].cells[c].clientWidth-6) +"px";  
					thead.style.width = thead.clientWidth - thead.rows[0].cells[c].clientWidth + tbody.rows[0].cells[c].clientWidth;  
				}  
			}  
		}  
	} catch(err) {  
		alert("Error:"+ err.description);  
	}  
}  
</script>  
  
</body>  
</html>