FireFox 4 unterstützt nicht mehr scrollbare TBody - Umgehungsmöglichkeiten?

Question

Nun, wie im Firefox 4 erwähnt Änderungsprotokoll wird es keine Unterstützung mehr für scrollbare <tbody> 's.

Es gibt eine ganze Reihe von Umgehungslösungen - javascript oder 2 getrennte Tabellen - aber keine davon löst alle Probleme. Javascript ist offensichtlich langsamer (mit 600 Zeilen können Sie vergessen, eine Tabelle zu scrollen), und 2 Tabellen werden mit Zellbreite problematisch sein.

Wissen Sie, ob es eine gute Möglichkeit gibt, dies zu tun? Wir verwenden jsf / facelets und müssen jetzt die Tags neu machen, mit einer guten Idee zu beginnen wäre super :-)

Answer 1

Ich weiß, dass Sie versuchen, js/separate table-Implementierungen zu vermeiden, aber es war die einzige, die ich finden konnte, die in mehreren Browsern funktioniert. Versuchen Sie http://www.tablefixedheader.com/ . Es ist eine Jquery-Lösung und funktionierte, in meiner begrenzten Tests, über IE6 / IE8 / FF3 (habe nicht getestet FF4).

Answer 2

PrimeFaces y RichFaces haben scrollbare datatable Komponenten, die neue Zeilen durch Ajax holt.

(beide JSF-Komponentenbibliotheken verwenden unter der Haube sowieso jQuery)

Answer 3

Dank digitaldigs von MozillaZine konnte ich es mit wenigen Änderungen zum Laufen bringen. Der Fix funktioniert gut für FF4, FF7 und FF11.

Ich hoffe, das hilft! :)

Probleme, die ich behoben habe. 1. scrollWidth hat bei mir nicht funktioniert, also musste ich offsetWidth verwenden.

1. Die Breite der Bildlaufleiste von 16 Pixeln war auch nicht hilfreich, also wurde sie entfernt. Stattdessen machte meine tbody Stil als-

   .scrollContent { overflow-x:hidden; overflow-y:scroll; /* Ich habe das nur für Mozilla gemacht. IE zeigt 2 Bildlaufleisten an, wenn es angewendet wird*/ display:block; }

2. Bei Änderung Nr. 2 musste ich die letzte Zelle der Kopfzeile auffüllen, um die Bildlaufleiste unterzubringen.

   /* Ich habe das nur für Mozilla gemacht. Nicht für IE*/

   .fixedHeader tr th:last-child { padding-right: 20px; }

3. Meine feste Kopftabelle hat colspan viel verwendet daher war nicht in der Lage, Breite zu setzen, so dass ich zuerst für eine richtige Zeile mit der richtigen Anzahl von Zellen suchen und dann ich verarbeiten.

Mein Code sieht wie folgt aus:

function makeMeFixedHeader(){ 
    var tbodys = document.getElementsByName("scrollTableBody");
    if (tbodys){
        for(var i=0;i<tbodys.length;i++){
            // We can put logic here to check if the current height 
            // of tbody has crossed the specified limit or not 
            do_tbodyscroll(tbodys[i]);
        }
    }
}

function do_tbodyscroll(_tbody){
    // get the table node 
    var table = _tbody.parentNode;

    // Get the Last row in Thead ... 
    // COLGROUPS USING COLSPAN NOT YET SUPPORTED
    var thead = table.getElementsByTagName("THEAD")[0];
    var _rows = thead.getElementsByTagName("TR");
    var tableheader = _rows[_rows.length - 1];
    var headercells = tableheader.cells;

    // rows of tbody 
    var _frows = _tbody.getElementsByTagName("TR");

    // first row of tbody 
    var _fr = _tbody.getElementsByTagName("TR")[0];
    //var _fr = _tbody.getElementsByName("scrollTableRow")[0];

    // first row cells .. 
    var _frcells = _fr.cells;

    if (_frcells.length < headercells.length){
        var rowCount = 1;
        while (rowCount < _frows.length){
            // nth  row of tbody 
            _fr = _tbody.getElementsByTagName("TR")[rowCount];
            //var _fr = _tbody.getElementsByName("scrollTableRow")[rowCount];

            // nth row cells .. 
            _frcells = _fr.cells;

            if (headercells.length == _frcells.length){
                break;
            }
            rowCount++;
        }
    }

    // Apply width to header ..
    for(var i=0; i<headercells.length; i++){    
        if (tableheader.cells[i].offsetWidth != _fr.cells[i].offsetWidth){
            var lastColumn = (i == headercells.length-1)?true:false;
            var changeWidth = (lastColumn)? ((rowCount >= 1)?true:false)
                    :true;
            var headerW = tableheader.cells[i].offsetWidth;
            var cellW = _fr.cells[i].offsetWidth;

            if (headerW < cellW){
                tableheader.cells[i].width = cellW;
                _fr.cells[i].width = tableheader.cells[i].width;

                if (lastColumn)
                    tableheader.cells[i].width = tableheader.cells[i].offsetWidth-20; 

            }else{
                tableheader.cells[i].width = headerW;
                _fr.cells[i].width = tableheader.cells[i].width;

                if (lastColumn)
                    _fr.cells[i].width = tableheader.cells[i].offsetWidth-20;
            }
        }
    }

    //var j = headercells.length-1;
    // ADD 16 Pixel of scroll bar to last column ..
    //tableheader.cells[j].width =  _fr.cells[j].offsetWidth + 20;

    tableheader.style.display = "block";
    _tbody.style.display = "block"; 
}

Answer 4

Versuchen Sie die erste Methode dieser Seite, reines CSS mit einer einzigen Tabelle (2 Divs um die Tabelle herum, und der Thead ist absolut positioniert): Tabellenkalkulation Scheint neben dem IE7/FF3.6 auch unter FF4/IE9/IE8 zu funktionieren.

Answer 5

Ich wurde gerade damit zugeschlagen, nachdem ich ein Upgrade durchgeführt hatte. Buh.

Das habe ich in den Tuben gefunden.

Dieser Code funktioniert in FFX 4, aber nicht im IE8... könnte geändert werden.

http://www.imaputz.com/cssStuff/bigFourVersion.html