Таблица с фиксированным заголовком и столбцом - оптимизация IE8

Я создал макет, который выглядит так:

Вот как это работает:

Как видите, заголовок фиксирован, но прокручивается, то же поведение для 1 столбца.

Вот код для этой демонстрации: http://jsfiddle.net/Misiu/9j5Xy/7/

Все работает отлично, но только на FF, на IE8 у меня есть 2 проблемы:

В FF у меня есть граница в head и row divs (внутри них есть таблицы), но IE8 разрезает нижнюю границу.

ОБНОВЛЕНИЕ: исправлена ошибка границы (обходной путь). Я добавил дополнительные границы в head, col и row div. http://jsfiddle.net/Misiu/9j5Xy/12/

Вторая проблема - с функцией прокрутки - на FF все работает, но IE8, как всегда, имеет проблемы. Когда я нажимаю на внутреннюю оболочку div и использую стрелки для прокрутки моей таблицы div, FF отлично работает, но IE иногда прокручивается случайным образом или возвращается в начало (произвольно нажимайте стрелку). Он должен допускать только один шаг во времени.

Может ли кто-нибудь помочь мне с исправлением этого в IE и оптимизировать код и css?

Я не хочу использовать какие-либо плагины, такие как DataTables. В моем случае лучше генерировать 4 таблицы на сервере, чем вызывать плагины на стороне клиента - для очень больших таблиц, а на более старых ПК потребовалось почти 3 минуты для запуска DataTables с FixedColumn.

Ответ 1

Мне удалось выполнить все исправления с помощью css и jQuery. http://jsfiddle.net/Misiu/9j5Xy/26/

Это мой код jQuery:

$(document).ready(function () {
function scrollHandler(e) {
    $('#row').css('left', -$('#table').get(0).scrollLeft);
    $('#col').css('top', -$('#table').get(0).scrollTop);
}
$('#table').scroll(scrollHandler);
$('#table').resize(scrollHandler);

var animate = false;
$('#wrapper').keydown(function (event) {
    if (animate) {
        event.preventDefault();
    };
    if (event.keyCode == 37 && !animate) {
        animate = true;
        $('#table').animate({
            scrollLeft: "-=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    } else if (event.keyCode == 39 && !animate) {
        animate = true;
        $('#table').animate({
            scrollLeft: "+=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    } else if (event.keyCode == 38 && !animate) {
        animate = true;
        $('#table').animate({
            scrollTop: "-=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    } else if (event.keyCode == 40 && !animate) {
        animate = true;
        $('#table').animate({
            scrollTop: "+=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    }
});
});

Но комментарии и оптимизация всегда приветствуются:)

Ответ 2

Возможно, вы захотите взглянуть на фреймворк, например Bootstrap или аналогичный. Реагирующие/флюидные макеты находятся в рабочем состоянии.