NickMalloy
Programmer
Is there a way to make a table with a static header that will work in IE and doesn't use Javascript? How would you do this? I tried experiementing with <thead> and <tbody> tags.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
table with static header 1
- Thread starter NickMalloy
- Start date
- Status
Probably the easiest way is to use 2 tables.
one for just a single row of headers and the second one for the rest of the table.
Clive
one for just a single row of headers and the second one for the rest of the table.
Clive
-
1
- #3
See:
Both use css to display scrollable tables. Both work in IE.
Both use css to display scrollable tables. Both work in IE.
Link 1 does not work so well with a valid doctype and uses javascript and hacks.
Link 2 uses javascript (I think only for the stripes) but has a lot of hacks.
By separating into two tables most of the css goes away and hacks are not necessary.
Clive
Link 2 uses javascript (I think only for the stripes) but has a lot of hacks.
By separating into two tables most of the css goes away and hacks are not necessary.
Clive
Sorry, I forgot the code example:
Clive
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<!-- ***************************** HEAD **************************** -->
<head><title>Non-scrolling Table Headers</title>
<style type="text/css">
th {text-align:left; font-weight:normal}
td {width:28%}
div {height:200px; overflow:scroll; background:#ff9}
.width {width:400px}
</style>
<!--[if IE]>
<style type="text/css">
div {overflow:hidden}
div {overflow-y:scroll}
</style>
<![endif]-->
</head>
<!-- ***************************** BODY **************************** -->
<body><h3>Non-scrolling Table Headers</h3>
<table class="width" border="1">
<tr><td>Station</td><td>Date</td><td>Status</td><th>Num.</th></tr>
</table><div class="width">
<table class="width" border="1">
<tr><td>KABC</td><td>09/12/2002</td><td>Submitted</td><th>0</th></tr>
<tr><td>KCBS</td><td>09/11/2002</td><td>Lockdown</td><th>2</th></tr>
<tr><td>WFLA</td><td>09/11/2002</td><td>Submitted</td><th>1</th></tr>
<tr><td>WTSP</td><td>09/15/2002</td><td>In-Progress</td><th>10</th></tr>
<tr><td>WROC</td><td>10/11/2002</td><td>Submitted</td><th>12</th></tr>
<tr><td>WPPP</td><td>09/16/2002</td><td>In-Progress</td><th>0</th></tr>
<tr><td>WRRR</td><td>09/06/2002</td><td>Submitted</td><th>5</th></tr>
<tr><td>WTTT</td><td>09/21/2002</td><td>In-Progress</td><th>0</th></tr>
<tr><td>W000</td><td>11/11/2002</td><td>Submitted</td><th>7</th></tr>
<tr><td>KABC</td><td>10/01/2002</td><td>Submitted</td><th>10</th></tr>
<tr><td>KCBS</td><td>10/18/2002</td><td>Lockdown</td><th>2</th></tr>
<tr><td>WFLA</td><td>10/18/2002</td><td>Submitted</td><th>1</th></tr>
<tr><td>WTSP</td><td>10/19/2002</td><td>In-Progress</td><th>0</th></tr>
</table></div></body></html>Clive
Ok, I guess link 1 has that problem of not using the doctype. Understood.
If link 2 uses JS for zebra stripes that has nothing to do with the scrolling. And so what if it uses hacks? It works and it will be much easier to maintain than two tables. Besides, what is that proprietary IE if in your code if not hack?
If link 2 uses JS for zebra stripes that has nothing to do with the scrolling. And so what if it uses hacks? It works and it will be much easier to maintain than two tables. Besides, what is that proprietary IE if in your code if not hack?
I think the [if IE] code is not in the normal sense a hack. It is a reliable way of differentiating IE browsers from more standards compliant browsers and also a way of putting IE only extensions in when appropriate.
In this case the point is moot, because if the "hack" were removed, the example would work exactly the same as as link 2 does in IE.
On the other hand link 2 does not work with the Javascript removed as the header drops down below the table.
Clive
In this case the point is moot, because if the "hack" were removed, the example would work exactly the same as as link 2 does in IE.
On the other hand link 2 does not work with the Javascript removed as the header drops down below the table.
Clive
What is an isn't a "hack" is a pretty subjective judgement. Code that I like is OK, code that I don't like is "full of hacks".
Personally, though I can see the value of IE conditional comments, I wouldn't use one here. Not because it's a "hack" (it's not), but because AFAIK it only works in (X)HTML. I'd want to put my all style definitions in a seperate stylesheet - so I'd have to target IE in a different way if using your code:
Code:
* html div {overflow:hidden;
overflow-y:scroll}I think it's a shame that the guy who did that second page chose to clutter it up with zebra-striping javascripts and other presentational stuff. I tried it with JS switched off, and it works fine for me in IE6 and FF. What browser are you using?
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
Chris, I would appreciate it if you could please clarify what you meant by:
What does this code do differently? I am not familiar with the "* html" method:
The link failed for me in IE6. See:
Clive
I have tended to stay away from more esoteric aspects of CSS because of compatibility issues but I thought the, [if IE], thing seemed real promising:
What does this code do differently? I am not familiar with the "* html" method:
Code:
* html div {overflow:hidden;
overflow-y:scroll}The link failed for me in IE6. See:
Clive
Since the link shows you were running the code locally, is it possible that you forgot to copy some part of it that caused this malfunction. I tried turning off JS in IE6 (and of course with JS on) and it worked as expected.
As for the [tt]* html ...[/tt] method it is a hack that makes only IE acknowledge the declarations inside it while other browsers ignore it. So basically you get the same result as with the IE conditionals but you can freely use it in a separate stylesheet, while IE conditionals must be used in HTML document (and do not work toward the content/presentation separation goal).
As for the [tt]* html ...[/tt] method it is a hack that makes only IE acknowledge the declarations inside it while other browsers ignore it. So basically you get the same result as with the IE conditionals but you can freely use it in a separate stylesheet, while IE conditionals must be used in HTML document (and do not work toward the content/presentation separation goal).
Thanks for the info Vragabond, you are a mine of information.
This is the code I removed. Was not too sure what it was all doing:
Clive
This is the code I removed. Was not too sure what it was all doing:
Code:
<script type="text/javascript">
<!--
/* [URL unfurl="true"]http://www.alistapart.com/articles/zebratables/[/URL] */
function removeClassName (elem, className) {
elem.className = elem.className.replace(className, "").trim();
}
function addCSSClass (elem, className) {
removeClassName (elem, className);
elem.className = (elem.className + " " + className).trim();
}
String.prototype.trim = function() {
return this.replace( /^\s+|\s+$/, "" );
}
function stripedTable() {
if (document.getElementById && document.getElementsByTagName) {
var allTables = document.getElementsByTagName('table');
if (!allTables) { return; }
for (var i = 0; i < allTables.length; i++) {
if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
var trs = allTables[i].getElementsByTagName("tr");
for (var j = 0; j < trs.length; j++) {
removeClassName(trs[j], 'alternateRow');
addCSSClass(trs[j], 'normalRow');
}
for (var k = 0; k < trs.length; k += 2) {
removeClassName(trs[k], 'normalRow');
addCSSClass(trs[k], 'alternateRow');
}
}
}
}
}
window.onload = function() { stripedTable(); }
-->
</script>Clive
- Status
Similar threads
- Locked
- Question
- Locked
- Question