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:
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.