1

これは、この質問の続きです: dataTables - Can't get horizo​​ntal scroll & fixed column to do their job. どこでも異なってレンダリングされるようです。私は何を間違っていますか？

ほとんどの場合、必要な方法で表示される dataTable を取得しました。しかし、これはそれがどのように見えるかです。

  • 以前の外観の写真がありましたが、下に回答を投稿しながら、なんとか編集することができました. 私はあなたがそれをすることができるとは思わなかった。
  • 以下の jsfiddle リンクにアクセスすると、以前の外観を引き続き確認できます。

スクロールバーが明らかに原因であるそのギャップを埋める方法があるかどうかだけでなく、スクロールバーをテーブルの外側に移動する方法があるかどうかも知る必要があります。

padding-right: 140px;移動しましたが、アクション列も覆い隠しました。次に、アクション列に z-index を適用しようとしましたが、移動すると、下部の水平スクロールが隠れてしまいます。高さを変更すると、テーブルの残りの部分と整列しないため、明らかに高さを変更することはできません。何かご意見は？

4

2 に答える 2

0

以下を使用して、固定列データテーブルからスクロールバーのギャップを削除しました。

 table#mainDataTable{
       margin-left: 300px !important; 
 }


 div.DTFC_ScrollWrapper div.dataTables_scroll div.dataTables_scrollBody{
       padding-left: 300px;
       left: -300px; 
 }

 div.DTFC_ScrollWrapper div.DTFC_LeftWrapper div.DTFC_LeftBodyWrapper{
       z-index: 1;
 }

iLeftWidthこれは、FixedColumn の初期化で 300px に設定したことを前提としています。セレクターはbJQueryUI、データテーブルの初期化時に false も想定します。

于 2013-06-14T17:14:45.487 に答える
0

私がそれを理解するまでには、少しの作業と多くの失敗が必要でした。最終的に、スクロールバーを生成するコンテナにパディングを追加し、アクション div に z-index を追加しました{position: absolute;}。次に、いくつかの高さと幅を調整する jquery をいくつか追加し、それに応じてスタイルを微調整する必要がありました。

パディングと z-index と配置の後、その大部分は、静的ではないテーブルが、現在ホバリングしているアクション列の後ろにスクロールすることでした。そのため、jquery を使用してその前に Actions 列のクローンを挿入し (または、たとえば、他のページの Actions である場合とそうでない場合がある最後の列)、プレースホルダーとして機能し、すべてを左にプッシュします。 [静的アクション] 列がクローンに重なって、表示したままにしたいものはすべてその左側に留まります。この方法でこれを行う場合、クローン列を作成する jquery が dataTable.js および/または FixedColumns.js の前に発生することが重要です。これは、適切に実行できるようにテーブル HTML を配置する必要があるためです。

次のようになります。

ここに画像の説明を入力

後は微調整が多い

于 2013-02-25T18:38:46.043 に答える