Tabelle festen Header und erste Spalte CSS/html

Question

Ich habe eine Tabelle, die eine große Anzahl von Zeilen und Spalten hat. Aber ich möchte den Header behoben und die erste Spalte fixiert haben. Hier ist ein Bild von dem, was ich brauche.

Nur das rosa Teil muss horizontal und vertikal bewegen, aber die anderen müssen während der Scrollen sichtbar bleiben. Mein Tisch ist in einem Div. Erstens, sollte ich einen Tisch oder vier (den blauen, den roten, den grünen und den rosa) benutzen?

ich diese Geige geschrieben haben:

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

Ich habe versucht, den Header zuerst zu beheben, aber ich war kein Erfolg

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

und so etwas wie dies die erste auszuwählen und zu beheben Spalte

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

aber es ist nicht über die Di beheben v, die meinen Tisch umhüllen. Vielleicht brauche ich etwas jQuery oder JavaScript?

Wenn jemand helfen könnte.

Answer 1

Mai werden Sie für so etwas suchen:

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

Alles, was Sie brauchen, ist die JS und CSS-Dateien enthalten und einfach class='responsive' zu Ihrem Tisch Element hinzuzufügen.

Ich habe versucht, das mit Ihrem Code zu implementieren, aber es gab ein Problem mit rowspan, also zwickte es ein wenig.

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

Ich glaube, Sie auch vertikale Scrollen in ähnlicher Weise wollten. Lass mich wissen, ob ich dabei helfen soll?

Answer 2

Ich löste das gleiche Problem mit nur einer Tabelle und DataTables Plugin mit FixedColumn Erweiterung. Sie können Demo des extesion sehen: http://datatables.net/release-datatables/extras/FixedColumns/

In meiner Lösung, die ich einen Tisch haben, in seiner Thead Abschnitt sind Reihen I eingefroren haben wollen (Sie können Sie für die erste Zelle rowspan). Und die FixedColumn-Erweiterung hat die ersten zwei Spalten für mich eingefroren.

Tables Plug-in init verwendet I: auch

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 
     });