3

私は現在、データのテーブルを持つ Web アプリを持っています。問題は、テーブル内のデータが多すぎて、モバイル デバイスで押しつぶされて読めなくなることです。ウィキペディアにはまさに私が目指しているものがあることに気付きました: http://en.m.wikipedia.org/wiki/Ivy_League#section_1

各セルのヘッダーが同じままで、内部のコンテンツが変更されないように、水平方向にスクロールするテーブルを作成したいと思います。

編集: これが私が現在持っているテーブルです: http://honedge.com/94296358

実際には触れていません:P

4

3 に答える 3

5

オーバーフロー プロパティが「auto」に設定された div でテーブルをラップできるはずです。これにより、完全なグリッドを表示するための領域が存在しない場合にスクロール可能な領域が得られます。

于 2012-07-06T18:28:43.083 に答える
2

上記の説明によると、次のようなものが役立ちます。

$("#example").dataTable({
  bFilter: false,
  bPaginate: false,
  sScrollX: "100%"
})

ここで完全なドキュメントを確認してください: http://datatables.net/ref

于 2012-07-06T20:11:41.013 に答える
0

sScrollX を使用しようとしましたが、何らかの理由で期待どおりに動作しませんでした。幅とオーバーフローが設定された div で、ヘッダー (ただし、他のデータテーブル コンポーネントは除く) を含むテーブルのみをラップすることで、問題を解決しました。

table=$("#example").dataTable();

table.wrap('<div style="overflow: auto; width: ' + 
table.parent().parent().parent().width()*0.95 + 'px"/>');

私がテストしたすべてのテーブル機能 (並べ替え、検索、表示するアイテムの数) は引き続き機能していました。

于 2013-02-20T21:39:52.813 に答える