具有固定标题和列的表 - IE8优化

Question

我创建了如下所示的布局：

这是它的工作原理：

正如您可以看到标题是固定但可滚动的，1列的行为相同。

以下是此演示的代码： http://jsfiddle.net/Misiu/9j5Xy/7/

一切正常，但只有FF，在IE8上我有两个问题：

• 在FF中，我在head和row div中有边框（在其中的表中），但是 IE8削减了底部边界。

更新：修复了边框错误（解决方法） - 我为head，col和row div添加了额外的边框。 http://jsfiddle.net/Misiu/9j5Xy/12/

• 第二个问题是滚动功能 - 在FF上一切正常，但IE8一如既往地存在问题。当我单击内部包装div并使用箭头滚动我的表格div时，FF工作正常，但IE有时会随机滚动或返回顶部（尝试随机按箭头）。它应该只允许一次移动。

---

有人可以帮我修复IE并优化代码和css吗？

---

我不想使用任何像DataTable这样的插件。在我的情况下，最好在服务器上生成4个表而不是在客户端调用插件 - 对于非常大的表，在旧PC上使用FixedColumn运行DataTables需要将近3分钟。

Answer 1

您可能需要查看Bootstrap或类似的框架。响应/流畅的布局在那里开箱即用。

Answer 2

＆＃39; ave设法用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();
    }
});
});

但欢迎评论和优化：）