Table fixed header and first column css/html

Question

I have a table that has a large number of line and columns. But I would like to have the header fixed and the first column fixed. Here is a picture of what I need.

Answer 1

I solved same problem with only one table and DataTables plugin with FixedColumn extension. You can see demo of the extesion: http://datatables.net/release-datatables/extras/FixedColumns/

In my solution I have one table, in its thead section are rows I want to have frozen (you can you rowspan for the first cell). And the FixedColumn extension froze first two columns for me.

DataTables plug-in init I used:

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