Question

I have created layout that looks like this: layout mockup

这就是它是如何运作的:

""https://i.sstatic.net/SI5nS.gif" alt="在这里输入图像描述"/ >

可以看到页眉是固定的,但可以滚动,同一行为是一列。

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

一切顺利,但只在FF上,在IE8上,我有两个问题:

In FF I have border in head and row divs (inside tables in them), but IE8 cuts the bottom border.

“https://i.sstatic.net/ XubrZt.jpg" alt=“ie mistake'/> https://i.sstatic.net/ XubrZt.jpg" alt=“ie mistake'/> https://i.sstatic.net/ Xubrzt.jpg" alt=“ie mistake”/>

UPDATE: Border error fixed (workaround) - I ve added extra border to head, col and row divs. http://jsfiddle.net/Misiu/9j5Xy/12/

Second problem is with scroll functionality-on FF everything works, but IE8 as always has problems. When I click inside wrapper div and use arrows to scroll my table div, FF works fine, but IE sometimes scrolls randomly or returns to top (try pressing arrow randomly). It should allow only one move at time.

有人能帮我修补内脏优化代码和CS吗?

我并不想使用任何插件, 如 Data Tables 。在我的情况下, 最好在服务器上生成 4 个表格, 而不是在客户端调用插件, 用于非常大的表格和老的 pc s 上, 使用固定的 Column 运行数据表几乎需要 3 分钟。

Answer 1

I ve managed to do all fixes with css and 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();
    }
});
});

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

Answer 2

您不妨查看一个框架, 如 < a href=> "http://twitter.github.com/bootsstrap/" rel="nofollow" >Bootsstrap 或类似的。响应性/ fluid布局在盒子里工作。

友情链接