0

Bootstrap と Datatables を使用しています。sScrollY を追加するところまで問題なく動作するテーブルを表示するコードがあります。これを追加するとすぐに、thead と tbody の間にギャップが生じます。

私が見る限り、DataTables は thead と tbody を 2 つの別々のテーブルに分割しています。Bootstrap css は margin-bottom: 20px を .table クラスに与えます。したがって、明らかに両方のテーブルにこの css クラスが適用され、両方の間に 20px のギャップが生じます。

誰かがこれに出くわしましたか？もしそうなら、どのように（私は）それを解決しましたか？

ありがとう

4

1 に答える 1

1

Bootstrap とデータテーブルを使用している場合:

(1) datatables サイトのこの投稿で説明されているコードを使用していますか? http://www.datatables.net/blog/Twitter_Bootstrap_2

(2) テーブルを で囲んでいます.containerか?

これらの手順を実行することが期待どおりに機能する唯一の方法であるとは言いたくありませんが、これらの手順をsScrollY実行することは、テーブルを期待どおりに機能させるために使用できるオプションの 1 つだと思います。

以下に例を示します:
http://jsbin.com/atofot/1
http://jsbin.com/atofot/1/edit

$(document).ready(function() {
    $('#new-example').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sScrollY": "200px",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
});

DT_bootstrap.cssサンプルが使用するおよびDT_bootstrap.jsdatatablesブログ投稿からのjsbin コードに注意してください。

于 2013-06-01T15:18:52.373 に答える