Einstein47
Programmer
Hey all,
My problem is with the "geniuses" at Mozilla who in their infinite wisdom decided to remove functionality because they didn't think people were using it. I want to scroll a table but keep the header at the top. I know what you are saying, [blue]"go google 'scrolling table' and use one of those solutions."[/blue] But none of those solutions will work in a real world application. I am not able to go to EVERY SINGLE page of my application and figure out the cell widths for every table and then have custom CSS for every page. [red]That is just not realistic![/red]
The issue is whether a TBODY element is a block-level element or not. What I was doing that provided the functionality I wanted was very simple:
Here is the main thread from Bugzilla which describes the initial bug, and the reasoning behind removing the "overflow: auto;" from the TBODY element.
So now I have code that works in IE (due to the "position:relative;top:expression( ... )" style in the TR of the THEAD), and FF 3.x - but not FF 4. This makes me so frustrated as a web developer. [red]How can we keep up with a moving target?[/red]
[blue]Can anyone help with an elegant solution that doesn't require me having to use 2 tables or fixed width cells?[/blue]
Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
My problem is with the "geniuses" at Mozilla who in their infinite wisdom decided to remove functionality because they didn't think people were using it. I want to scroll a table but keep the header at the top. I know what you are saying, [blue]"go google 'scrolling table' and use one of those solutions."[/blue] But none of those solutions will work in a real world application. I am not able to go to EVERY SINGLE page of my application and figure out the cell widths for every table and then have custom CSS for every page. [red]That is just not realistic![/red]
The issue is whether a TBODY element is a block-level element or not. What I was doing that provided the functionality I wanted was very simple:
Code:
[b]in the CSS:[/b]
HTML>BODY TBODY#scrollContent {
overflow-y: auto;
overflow-x: hidden;
}
[b]in the HTML:[/b]
<DIV id="resultsContainer">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="1">
<THEAD>
<TR style="position:relative;top:expression(this.offsetParent.scrollTop-1);">
<TD width="100" class="tableHead"> Col 1</TD>
<TD class="tableHead">Col 2</TD>
<TD class="tableHead">Col 3</TD>
....
<TD class="tableHead"> </TD>
</TR>
</THEAD>
<TBODY id="scrollContent">
<% ... Dynamic server-side content goes here ... %>
</TBODY>
</TABLE>
</DIV>
[b]And lastly include this javascript:[/b]
window.onresize = my_init;
function my_init() {
cHeight = getClientSize('h');
topHeight = document.getElementById('topDiv').offsetHeight;
var bh = (cHeight - (18 + topHeight)) + "px";
document.getElementById('resultsContainer').style.height = bh;
rH = document.getElementById('resultsContainer').offsetHeight;
sH = document.getElementById('scrollContent').offsetHeight;
sC = document.getElementById('scrollContent').style.height.length;
if( (sH>rH || sC>0) && typeof( window.innerWidth ) == 'number' ) { // Non-IE
var ih = (cHeight - (40 + topHeight)) + "px";
document.getElementById('scrollContent').style.height = ih;
}
}
Here is the main thread from Bugzilla which describes the initial bug, and the reasoning behind removing the "overflow: auto;" from the TBODY element.
So now I have code that works in IE (due to the "position:relative;top:expression( ... )" style in the TR of the THEAD), and FF 3.x - but not FF 4. This makes me so frustrated as a web developer. [red]How can we keep up with a moving target?[/red]
[blue]Can anyone help with an elegant solution that doesn't require me having to use 2 tables or fixed width cells?[/blue]
Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“