Фиксированный заголовок таблицы и первый столбец css/html

Question

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

Только розовая часть должна прокручиваться по горизонтали и вертикали, но остальные должны оставаться видимыми во время прокрутки. Мой стол в 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?

Если кто-нибудь может помочь.

Answer 1

Может быть, вы ищете что-то вроде этого:

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

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

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

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

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

Answer 2

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

В моем решении у меня есть одна таблица, в разделе thead находятся строки, которые я хочу заморозить (вы можете выполнить rowspan для первой ячейки). И расширение 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
        });