FF4 broke my scrolling tables

[Einstein47]

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:

[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">&nbsp;Col 1</TD>
          <TD class="tableHead">Col 2</TD>
          <TD class="tableHead">Col 3</TD>
          .... 
          <TD class="tableHead">&nbsp;</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

https://bugzilla.mozilla.org/show_bug.cgi?id=28800

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“

 

[BillyRayPreachersSon]

The actual problem aside...

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. That is just not realistic!

Have you considered putting a few lines of JavaScript on every page to automatically set your cell widths if no explicit width has been set?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[Einstein47]

I really don't believe there is a simple "few lines of JavaScript" that will cure the issues I'm having with keeping the header row of my table to be fixed in relation of the scrolling of the content of the table.

I would still need to go to every page and implement the JavaScript [blue]AND[/blue] once FireFox 5 releases on June 21, 2011 who is to say that solution will be deemed a violation of the standards as perceived by the vaunted Mozilla PHBs (Pointy Haired Bosses - a Dilbert reference).

Until a browser developer somewhere has the guts to put his/her foot down and say, "This is how the THEAD, TBODY, and TFOOT rowgroups need to be defined so HTML tables will function so all web programmers can follow THIS standard." I feel we are doomed to constantly be patching hacks to get the desired online functionality that MS Excel had back in 1992.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“

 

[BillyRayPreachersSon]

If you have a lot of pages, consider using a server-side technology to help you create templates which make it easier to get updates onto many pages.

Failing that, a good search-and-replace utility makes a great addition to any developer's arsenal. I use either TextPad or Eclipse for this depending on my needs... Adding code (if that's what you decide to do to fix your issue) needn't be a hassle.



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign