Bảng tiêu đề cố định và cột đầu tiên css/html

Question

Tôi có một bảng có số lượng lớn các dòng và cột. Nhưng tôi muốn có tiêu đề cố định và cột đầu tiên cố định. Đây là một hình ảnh về những gì tôi cần. Chỉ

phần màu hồng phải cuộn ngang và dọc nhưng những người khác phải ở lại có thể nhìn thấy trong di chuyển. Bảng của tôi nằm trong div. Đầu tiên, tôi có nên sử dụng một hoặc bốn bàn (cái màu xanh, cái màu đỏ, cái màu xanh lá cây và màu xanh lá cây).

Tôi đã viết fiddle này:

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

Tôi cố gắng để sửa chữa các tiêu đề đầu tiên nhưng tôi đã không phải là một thành công

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

và một cái gì đó như thế này để chọn và sửa chữa đầu tiên cột

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

nhưng không khắc phục được v quấn bàn của tôi. Có lẽ tôi sẽ cần một số jQuery hoặc JavaScript?

Nếu có ai có thể giúp đỡ.

Answer 1

Có thể bạn đang tìm kiếm một cái gì đó như thế này:

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

Tất cả bạn cần là bao gồm JS và các file CSS và chỉ cần thêm class='responsive' đến yếu tố bảng của bạn.

Tôi đã cố gắng triển khai điều đó bằng mã của bạn, nhưng có một số vấn đề với rowspan, vì vậy hãy chỉnh sửa nó một chút.

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

Tôi nghĩ bạn cũng muốn cuộn dọc theo kiểu tương tự. Hãy cho tôi biết nếu tôi nên giúp đỡ với điều đó?

Answer 2

Tôi đã giải quyết được sự cố tương tự với chỉ một bảng và plugin DataTables có phần mở rộng FixedColumn. Bạn có thể thấy bản demo của extesion: http://datatables.net/release-datatables/extras/FixedColumns/

Trong giải pháp của tôi, tôi có một bảng, trong phần thead của nó là hàng Tôi muốn đã bị đóng băng (bạn bạn có thể rowspan cho ô đầu tiên). Và phần mở rộng FixedColumn đóng băng đầu tiên hai cột cho tôi.

DataTables plug-in init tôi đã sử dụng:

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