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

Question

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

这是它的工作原理：

如您所见，标题是固定的但可滚动，相同的行为适用于 1 列。

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

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

• 在 FF 中，我在头部和行 div 中有边框（在其中的表格内），但 IE8 削减了底部边框。

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

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

---

有人可以帮我在 IE 中解决这个问题并优化代码和 css 吗？

---

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

Answer 1

您可能想看看像Bootstrap或类似的框架。响应式/流畅的布局是开箱即用的。

Answer 2

我已经设法用 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();
    }
});
});

但是总是欢迎评论和优化:)