Ich habe eine Lösung, mit der ich scrollbare Tabellen mit festen Kopf- und Fußzeilen mithilfe von geringfügigem jQuery und CSS erstellen kann. Ich bin jedoch auf der Suche nach einer Möglichkeit, diese Lösung nur für CSS zu erstellen, die browserkompatibel ist.

Um klar zu sein, was ich tun möchte, ist zu verwendennur a table Tag (und es ist gültige Sub-Tags,colgroup, col, thead, tbody, tfoot, tr, th, td), aber nehmen Sie eine Reihe von CSS-Regeln an, die die folgenden Bedingungen erfüllen:

Die Spaltenausrichtung zwischen Kopf- / Fuß- / Inhaltszeilen muss beibehalten werdenDie Kopf- / Fußzeile muss fixiert bleiben, während der Inhalt vertikal gescrollt wirdEs darf kein jQuery oder anderes JavaScript erforderlich sein, um die Funktionalität bereitzustellenDarf nur die oben angegebenen Tags verwenden

Dieses Codebeispiel:http://jsfiddle.net/TroyAlford/SNKfd/ zeigt meinen aktuellen Ansatz. Der größte Teil des JS besteht nur darin, die Tabelle mit zufälligen Werten zu füllen, aber der letzte Teil bestimmt die Bildlauffähigkeit nach links / rechts.

$tbody.bind('scroll', function(ev) {
    var $css = { 'left': -ev.target.scrollLeft };
    $thead.css($css);
    $tfoot.css($css);
});

HINWEIS: Das angegebene Beispiel wird im IE nicht ordnungsgemäß gerendert und erfordert, dass jQuery den horizontalen Bildlauf bereitstellt. Horizontales Scrollen ist mir sowieso egal, also ist es in Ordnung, wenn eine Lösung das nicht tut.