Stały nagłówek tabeli i pierwsza kolumna css/html

Question

Mam tabelę, która ma dużą liczbę linii i kolumn. Ale chciałbym, aby nagłówek był naprawiony, a pierwsza kolumna stała. Oto obraz tego, czego potrzebuję.

Tylko różowy część musi przejść w poziomie i pionie, ale inni muszą pozostać widoczne podczas przewijania. Mój stolik jest w dziale. Po pierwsze, czy powinienem użyć jednego lub czterech stołów (niebieskiego, czerwonego, zielonego i różowego)?

Pisałem ten skrzypce:

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

próbowałem naprawić nagłówek pierwszy, ale nie był to sukces

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

i coś takiego, aby wybrać i rozwiązać pierwszy kolumna

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

ale nie dotyczy to di v owijam mój stół. Może będę potrzebować jQuery lub JavaScript?

Jeśli ktokolwiek mógłby pomóc.

Answer 1

Może szukasz czegoś takiego:

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

Wszystko czego potrzebujesz to obejmować JS i pliki CSS i po prostu dodać class='responsive' do elementu tabeli.

Próbowałem zaimplementować to za pomocą kodu, ale wystąpił problem z rowspanem, więc trochę go poprawiono.

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

myślę, że również chciał przewijanie w pionie w podobny sposób. Daj mi znać, czy powinienem w tym pomóc?

Answer 2

Rozwiązałem ten sam problem tylko z jedną tabelą i wtyczką DataTables z rozszerzeniem FixedColumn. można zobaczyć demo extesion: http://datatables.net/release-datatables/extras/FixedColumns/

W moim roztwór Mam jedną tabelę, w sekcji THEAD są wiersze Chcę mieć zamrożone (można wy rowspan do pierwszej komórki). Rozszerzenie FixedColumn zawiesiło dla mnie dwie pierwsze kolumny.

DataTables wtyczki w init użyłem:

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