テーブル固定ヘッダーと最初の列css/html

Question

私は多数の行と列を持つテーブルを持っています。しかし、私はヘッダーを固定し、最初の列を固定したいと思います。ここに私が必要とするものの写真があります。

だけピンクの部分は、水平方向と垂直方向にスクロールしなければならないが、他の人は、スクロール中に目に見えるとどまる必要があります。私のテーブルはdivにあります。 まず、1つまたは4つのテーブル（青、赤、緑、ピンクのいずれか）を使用する必要がありますか？

私はこのバイオリンを書かれている：

http://jsfiddle.net/5XWqj/1/

私は最初のヘッダーを修正しようとしたが、私は最初に選択して、修正するために成功、このような

#container thead { 
    position: fixed; 
    top: 0; 
} 

と何かではなかったです列

#container tbody tr td:first-child { 
    position: fixed; 
    left: 0; 
} 

しかし、di vは私のテーブルを包む。 jQueryやJavaScriptが必要なのでしょうか？

誰かが助けてくれたら。

Answer 1

は、あなたがこのような何かを探しているかもしれませ：

http://zurb.com/playground/playground/responsive-tables/index.html

必要なのは、JSとCSSファイルを含めて、単にあなたのテーブル要素にclass='responsive'を追加することです。

私はあなたのコードでそれを実装しようとしましたが、rowspanに問題があったので少し修正しました。

http://jsfiddle.net/UqYgq/3/

私はあなたにも同様の方法で垂直方向のスクロールを望んでいたと思います。もし私がそれを助けなければならないかどうか教えてください。

Answer 2

FixedColumn拡張機能を持つ1つのテーブルとDataTablesプラグインで同じ問題を解決しました。あなたはextesionのデモ見ることができます ：私はそのthead要素セクションでは、一つのテーブルを持っている私の解決策ではhttp://datatables.net/release-datatables/extras/FixedColumns/

を私は（あなたが最初のセルにROWSPANことができます）凍結しているしたい行です。そして、FixedColumn拡張機能は私のために最初の2つの列を凍らせました。

のDataTableは、プラグインIを使用INIT：

duplicatesTable = $('.js-merge-duplicates-table').dataTable({ 
      //I want standard table look - no DataTables features but frozen header 
      "bPaginate": false, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bSort": false, 
      "bInfo": false, 
      "bAutoWidth": false, 
      "sScrollX": "100%", 
      "sScrollY": "500", 
      "bScrollCollapse": true 
     }); 
     new FixedColumns(duplicatesTable, { 
      "iLeftColumns": 2, //maybe you would need only one column 
      "iLeftWidth": 350 
     });