Przewijalna tabela tylko z CSS ze stałymi nagłówkami

Mam rozwiązanie, dzięki któremu mogę tworzyć przewijalne tabele w / fixed nagłówek / stopkę przy użyciu minor jQuery i CSS - ale szukam sposobu, aby to rozwiązanie było tylko CSS, które jest zgodne z różnymi przeglądarkami.

Żeby było jasne, to, co chcę zrobić, to użyćtylko a table tag (i jego poprawne podtytuły,colgroup, col, thead, tbody, tfoot, tr, th, td), ale przyjmij zestaw reguł CSS, które spełnią następujące warunki:

Musi zachowywać wyrównanie kolumn między wierszami nagłówka / stopki / treściNależy zezwolić, aby nagłówek / stopka pozostawał stały, podczas gdy zawartość przewija się w pionieNie może wymagać żadnego jQuery lub innego JavaScript w celu zapewnienia funkcjonalnościNależy używać tylko tagów podanych powyżej

Ten przykład kodu:http://jsfiddle.net/TroyAlford/SNKfd/ pokazuje moje obecne podejście. Większość JS polega na wypełnianiu tabeli losowymi wartościami, ale ostatnia część jest tym, co napędza przewijanie w lewo / w prawo.

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

UWAGA: Podany przykład nie wyświetla się poprawnie w IE i wymaga jQuery, aby zapewnić przewijanie w poziomie. I tak nie obchodzi mnie przewijanie w poziomie, więc jest w porządku, jeśli rozwiązanie tego nie robi.

questionAnswers(13)

yourAnswerToTheQuestion