2

次のようなレイアウトを作成しました。 レイアウトのモックアップ

これがどのように機能するかです：

ここに画像の説明を入力

ご覧のとおり、ヘッダーは固定されていますがスクロール可能です。同じ動作が 1 列に対して行われます。

このデモのコードは次のとおりです: http://jsfiddle.net/Misiu/9j5Xy/7/

すべてが正常に動作しますが、FF でのみ、IE8 で 2 つの問題があります。

  • FF では、head div と row div (テーブルの内側) に境界線がありますが、IE8 は下の境界線をカットします。

すなわちエラー

更新: ボーダー エラーが修正されました (回避策) - ヘッダー、列、および行の div に余分なボーダーを追加しました。 http://jsfiddle.net/Misiu/9j5Xy/12/

  • 2 番目の問題は、スクロール機能に関するものです。FF ではすべてが機能しますが、IE8 にはいつものように問題があります。ラッパー div 内をクリックし、矢印を使用してテーブル div をスクロールすると、FF は正常に動作しますが、IE がランダムにスクロールしたり、トップに戻ったりすることがあります (矢印をランダムに押してみてください)。一度に 1 つの移動のみを許可する必要があります。

誰かが IE でこれを修正し、コードと CSS を最適化するのを手伝ってくれませんか?

DataTables のようなプラグインは使いたくありません。私の場合、非常に大きなテーブルのクライアント側でプラグインを呼び出すよりも、サーバーで 4 つのテーブルを生成する方が適切であり、古い PC では、FixedColumn で DataTables を実行するのに約 3 分かかりました。

4

2 に答える 2

0

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();
    }
});
});

But comments and optimizations are always welcome :)

于 2012-05-23T09:13:30.440 に答える
0

Bootstrapなどのフレームワークを調べてみるとよいでしょう。レスポンシブ/流動的なレイアウトは、すぐに使用できます。

于 2012-05-22T14:08:23.420 に答える