Table fixed header and first column css/html

前端 未结 2 663
无人及你
无人及你 2021-02-07 12:17

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.

相关标签:
2条回答
  • 2021-02-07 12:55

    May be you are looking for something like this:

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

    All you need is include the JS and CSS files and simply add class='responsive' to your table element.

    I tried to implement that with your code, but there was some issue with rowspan, so tweaked it a bit.

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

    I think you also wanted vertical scrolling in similar fashion. Let me know if I should help with that?

    0 讨论(0)
  • 2021-02-07 13:01

    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
            });
    
    0 讨论(0)
提交回复
热议问题