Таблица фиксированного заголовка и первого столбца css/html

У меня есть таблица с большим количеством строк и столбцов. Но я бы хотел, чтобы заголовок был исправлен, а первый столбец исправлен. Вот картина того, что мне нужно.

enter image description here

Только розовая часть должна прокручиваться по горизонтали и вертикали, а остальные должны оставаться видимыми во время прокрутки. Моя таблица находится в div. Во-первых, следует ли использовать один стол или четыре (синий, красный, зеленый и розовый)?

Я написал эту скрипку:

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

Сначала я попытался исправить заголовок, но я не был успешным

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

и что-то вроде этого, чтобы выбрать и исправить первый столбец

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

но это не исправление о div, который обертывает мою таблицу. Может мне понадобится jQuery или JavaScript?

Если кто-то может помочь.

Ответы

Ответ 1

Возможно, вы ищете что-то вроде этого:

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

Все, что вам нужно, это включить файлы JS и CSS и просто добавить class='responsive' в свой элемент таблицы.

Я попытался реализовать это с вашим кодом, но была проблема с rowspan, поэтому немного изменила его.

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

Я думаю, вы также хотели вертикальную прокрутку аналогичным образом. Дайте мне знать, помогаю ли я с этим?

Ответ 2

Я решил такую ​​же проблему только с одним таблицей и плагином DataTables с расширением FixedColumn. Вы можете увидеть демонстрацию extesion: http://datatables.net/release-datatables/extras/FixedColumns/

В моем решении у меня есть одна таблица, в разделе thead находятся строки, которые я хочу заморозить (вы можете использовать строки для первой ячейки). И расширение FixedColumn заморозило для меня первые два столбца.

Плагин DataTables 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
        });