Tabella intestazione fissa e prima colonna css/html

Question

Ho una tabella con un numero elevato di righe e colonne. Ma mi piacerebbe avere l'intestazione riparata e la prima colonna riparata. Ecco una foto di ciò di cui ho bisogno. Solo

la parte rosa deve scorrere orizzontalmente e verticalmente, ma gli altri devono rimanere visibile durante lo scorrimento. Il mio tavolo è in un div. Per prima cosa dovrei usare un tavolo o quattro (quello blu, quello rosso, quello verde e quello rosa)?

Ho scritto questo violino:

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

Ho cercato di risolvere l'intestazione prima, ma non è stato un successo

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

e qualcosa di simile per selezionare e fissare la prima colonna

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

ma non si fissa sul di v che avvolga il mio tavolo Forse avrò bisogno di jQuery o JavaScript?

Se qualcuno potesse aiutare.

Answer 1

può essere siete alla ricerca di qualcosa di simile:

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

Tutto ciò che serve è includere i file CSS e JS e semplicemente aggiungere class='responsive' al vostro elemento di tabella.

Ho provato a implementarlo con il codice, ma c'era un problema con rowspan, quindi l'ho modificato leggermente.

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

penso che si voleva anche lo scorrimento verticale in modo simile. Fammi sapere se dovrei aiutare con quello?

Answer 2

Ho risolto lo stesso problema con una sola tabella e il plug-in DataTables con estensione FixedColumn. Potete vedere una demo del extesion: http://datatables.net/release-datatables/extras/FixedColumns/

Nella mia soluzione ho una tabella, nella sua sezione thead sono le righe voglio avere congelato (si si può RowSpan per la prima cella). E l'estensione FixedColumn ha congelato le prime due colonne per me.

DataTable plug-in init ho usato:

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