7

x 軸スクロールを正しく使用していない Datatables に問題があります。

以前、IE9 の「ゴースト セル」の問題に直面していましたが、修正できました。ただし、overflow-x を非表示にしてウィンドウをスクロール可能にする代わりに、overflow-x が表示されるという問題が発生しています。

私のデータテーブルの初期化:

 var oTable = $('#tableBP').dataTable({
        "bJQueryUI": true,
        "sScrollX": "100%",
        "sScrollXInner": "200%",
        "sScrollY": 300,
        "bScrollCollapse": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": false,
        "bPaginate": false
    });

    //This is a Datatables plugin. The issue occurs whether I comment this part or not.
    new FixedColumns(oTable, { 
        "iLeftWidth": 225
    });

これは私が直面しているものです：オーバーフローXが正常に機能しない

ただし、IE9互換モードで動作します。残念ながら、ページの他の部分では実行できません。これは下位バージョンとの互換性ですが、IE9 のみの問題であることは明らかです。Chrome、Safari、Opera、Firefox では問題ありません。

そのサイズが非常に大きいため (場合によっては 2000 以上の td フィールド)、テーブルをここに投稿するつもりはありません。これは、thead/tbody を含む完全に有効な HTML テーブルであり、タグ間のすべての空白が削除されています (これにより、以前のゴースト セルの問題が修正されました)。

誰でも Datatables の経験があり、この問題の根本原因を知っていますか?

PS: これは MVC2 アプリ (C#.Net) ですが、この問題は、この Web ページを生成したアプリケーションとは無関係のようです。

アップデート

次の部分について言及するのを忘れていました。

以前はテーブルが正しく表示されていました。しかし、大きなテーブルでの IE9 のゴースト セルの問題により、table/thead/tbody/tr/td タグの間からすべての空白を削除する必要がありました。アプリケーションの HTML 出力で正規表現の置換を強制することで、これを解決しました。

// response is the string with my HTML output which will be written to the browser after this:

string expression = @">[ \t\r\n\v\f]*<td"; 
response = Regex.Replace(response, expression, @"> <td");

RegEx 置換をコメント アウトすると、データ テーブルのオーバーフローは完全に機能しますが、ゴースト セルの問題に直面し、ミスアラインメントと全面的な醜さを引き起こします。コメントを外すと、すべてのセルが完全に整列されますが、オーバーフローは機能しなくなります。

私が言ったように、問題はIE9にのみ関係します。他のすべてのブラウザー (互換モードの IE9 を含む) は、テーブルをコメント付き/コメントなしの両方の状態で完全にレンダリングします。

4

5 に答える 5

3

多くの検索と忍耐の後、問題を解決することができました。

問題は Bootstrap 関連でした。正確には Bootstrap ではありませんが、Bootstrap.css が行うことは、max-width: 100%;すべてのテーブルに a を追加することです。overflow-xこれは一般的なレイアウトには最適ですが、明らかに IE9 はそれをスクロール可能なセットアップと組み合わせることができません。私の経験から、IE9は最大および最小の高さと幅があまり好きではありません。

しかし、皆さんの努力に感謝したいと思います。この問題の根本原因を見つけるための正しい道に私を導いてくれました!

于 2012-09-20T14:57:16.777 に答える
2

demo_table_jui.cssこれを117 行目 (下.dataTables_wrapper)に追加します。

.DTFC_ScrollWrapper {
    overflow: hidden;
    overflow-x: scroll;
}

これでうまくいきます (少なくとも、ここでは、IE9 の IE7 と IE8 ドキュメント モードの両方を含むすべてのブラウザーで)。

水平スクロール（垂直スクロールバーなし）の動作、検索ボックス付きのヘッダーが表示されたまま

編集済み.dataTables_wrapper:この回答の前半で提案したように、オーバーフロー コードを追加するべきではありませんが、.DTFC ScrollWrapper代わりにオーバーフローでクラスを指定する必要があります。上記のコードを参照してください。

ところで、まったく関係ありません。この会社はいつも「De Bende van Nijvel」を思い出させます。理由は聞かないでください ;)

于 2012-09-18T08:10:48.140 に答える
0 
/*
 * The position is changed from relative to inherit, to fix the issue with the scrolling of the wrapper.
 */

.dataTables_wrapper {
    position: inherit;
    clear: both;
    *zoom: 1;
}

問題は、DIVの位置が原因​​である可能性があります。データテーブルcssの位置をオーバーライドすることで、同様の問題を修正しました。

于 2013-01-14T09:44:03.120 に答える
0

Here is a solution on line 110 in .dataTables_wrapper add overflow:auto; after clear:both;

.dataTables_wrapper {
    position: relative;
    min-height: 302px;
    _height: 302px;
    clear: both;
    overflow:auto;
}

Before

Before
(source: iforce.co.nz)

After

After
(source: iforce.co.nz)

Might want to throw an extra div around the 3 tables, and give that overflow:auto;, clear:both; if you want to sit nicely below your search toolbar.

于 2012-09-18T08:46:59.890 に答える
0

次のCSSを適用してこれを修正しました。

/* this is needed for IE and Firefox if using horizontal scroll*/
table{
    max-width: none;
    min-height: 0%;
}
于 2013-11-22T16:58:44.717 に答える