左端の列を常に表示する必要があり、各行が 1 行しか表示されない表形式の大量のデータがあります。これは、CSS ディレクティブで実現できますwhite-space: nowrap。
私はDataTables jQuery プラグインとそのFixedColumns 拡張機能を選択しました。これは、私が探しているものに非常にうまく適合します。
ただし、Internet Explorer (バージョン 11 は手元にあるものです) グリッドが正しく整列していないことがわかります。固定列には独自のスクロール バーがあり、テーブル ヘッダーは対応する列と完全に整列しなくなりました。
問題を示すために JSFiddle を作成しました - http://jsfiddle.net/tczwysao/11/。空白ディレクティブをコメント アウトすると、列が整列することがわかります。しかし、1 行にとどまるには、一番左の列が必要です。
これを実装した方法にエラーがありますか、それとも回避策を提案できますか?
Bootstrap をロードして適切なテーブル クラスを追加するのを忘れましたtable table-striped table-bordered。
修正されたコードのデモについては、この jsFiddleを参照してください。
DTFC_LeftBodyWrapperの高さのように見えDTFC_LeftBodyLiner、プラグインの 1 つで正しく設定されていません (これはスクロール バーの問題です)。firebug を使用してそこに移動し、それらの要素の設定された高さを削除すると、バーが消えます..
列ヘッダーに関しては、これはかなりひどいハックですが、ヘッダーの周りにパディングを配置し、ヘッダーの幅を正しく設定することができました。
<th class="fixed-column" style="padding: 0 70px">Fixed Column</th>
ここでフィドル：http: //jsfiddle.net/tczwysao/7/私にはFirefoxで見栄えがしますが、その回避策について少し脂っこい気がします。