nicht angemeldet
IE HTML TABLE SCROLL WITH FIXED HEADER
Gunnar BittersmannMeine 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>
-
Hi,
Meine valiante:
... ist komplett unsemantisch und damit nutzflei.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
@@Cheatah:
nuqneH
... ist komplett unsemantisch und damit nutzflei.
Meinten Sie: Sitzfleisch?
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
@@Cheatah:
nuqneH
... ist komplett unsemantisch und damit nutzflei.
Meinten Sie: Sitzfleisch?
Vielleicht ein Spickzettel für zu Sitzengebliebende.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
... ist komplett unsemantisch und damit nutzflei.
Meinten Sie: Sitzfleisch?
Vielleicht ein Spickzettel für zu Sitzengebliebende.
Nein, nein, ich denke schon, dass Cheatah Sitzfleisch meinte: dass die Variante komplett unsemantisch und damit fürs Sitzfleisch ist.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-