如何冻结表格的标题和左列

Question

我想修复表格的标题和左 3 列。

但我只找到了一种合适的解决方案。这是链接：http://hazaa.com.au/blog/how-to-create-an-html-table-with-frozen-headers-and-columns/

我需要将我的表分成 4 个独立的表，这并不好。 我还发现了插件http://www.fixedheadertable.com/（作为关于 SO 的另一个此类问题的建议）不幸的是它只能冻结一个左列（我需要 3 列）。

还有其他简单的方法来实现这个功能吗？

Answer 1

标准的 html 表格不支持冻结列，即使使用 css。

如果您可以使用 jquery 插件，我建议您将 http://www.datatables.net/ 与 fixedcolumns 插件一起使用（只需配置即可：））

如果没有，你最终会得到你的解决方案，你必须以一种或另一种方式拆分表格，如果你想拥有可滚动的表格，你将不得不使用 javascript，因为 css 和 html 不支持还没有这样的功能。

Answer 2

我想分享一下我是如何做到这一点的。此代码肯定在某种程度上基于在此站点上找到的其他代码，但早已丢失了确切的位置。需要 jQuery。可能不支持您可能想要对一张桌子做的各种奇怪的事情。

<div class='tableFreeze'>
<table>
   <thead>
      <tr><th>Headers</th><th>Go</th><th>Here</th></tr>
   </thead>
   <tbody>
      <!--table body stuff goes here-->
   </tbody>
</table>
</div>

<style>
.tableFreeze {
    width: 800px;
    max-height: 500px;
    position: relative;
    overflow: scroll;
}
</style>

<script>

$(document).ready(function(){

    //Sets a table to have frozen headers, or both headers and first column
    //A div around the table must have a class of 'tableFreeze'
    //can also add class 'tableFreeze_headersOnly' to the div to specify only headers should be frozen
    //Table inside of div must have one thead and one tbody
    //can set the div to have custom CSS defining the width and max height
    $('.tableFreeze').each(function(){
        var div=$(this);
        //get the table in the DIV 
        var table=div.children('table');

        // save original width to table object
        var table_original_width=table.width();
        //do the same for each td or th in the header
        table.find('thead tr td,thead tr th').each(function(){
            $(this).attr("data-item-original-width",$(this).width());
        });
        //do the same for the heights of each first cell on the left
        var table_original_height=table.height();
        table.find('tr').each(function(){
            $(this).find('td,th').eq(0).attr("data-item-original-height",$(this).find('td,th').eq(0).height());
        });

        //need a copy of the table to strip away and make it just the header
        var table_header=table.clone();

        //set the whole copy of this table to have the proper width 
        table_header.width(table_original_width);
        //set width of all cells in the header
        table_header.find('thead tr td,thead tr th').each(function(){
            $(this).width($(this).attr("data-item-original-width"));
        });
        //remove the tbody
        table_header.find('tbody').remove();
        //set the width and height of this header bar.  add a header class
        table_header.css({'width':table_original_width,'height':table_header.find("td,th").first().attr('data-item-original-height'),"position":"absolute","left":0,"top":0}).addClass('tableFreeze_header');
        //add to div
        div.append(table_header);

        //if we have this class, we don't need to do the rest
        if ($(this).hasClass('tableFreeze_headersOnly')) return;


        //another copy of the table for just the left bar
        var table_leftcol=table.clone();

        //go through each row (in both tbody and thead)
        table_leftcol.find('tr').each(function(){
            //remove all but the first cell
            $(this).children('td,th').slice(1).remove();
            //set the height of each cell to be the original height
            $(this).children('td,th').height(($(this).children('td,th').attr("data-item-original-height")*1)+1);
        });
        //set: the height of the whole table based on the original height we got, the width based on the width set of the first cell, absolutely position it on the left and right, and an id for finding later
        table_leftcol.css({'height':table_original_height,'width':table_leftcol.find("td,th").first().attr('data-item-original-width'),"position":"absolute","left":0,"top":0}).addClass('tableFreeze_leftcol');

        //add to div
        div.append(table_leftcol);


        //and finally a similar thing for just the top left cell (a1).  That will need to always be on the top left.
        var table_a1=table.clone();

        //set copy to be original table width
        table_a1.width(table_original_width);
        //get the width and height of the a1 cell
        var table_a1_width=table_a1.find("thead tr td,thead tr th").eq(0).attr("data-item-original-width");
        var table_a1_height=table_a1.find("thead tr td,thead tr th").eq(0).attr("data-item-original-height");
        //remove all but the first cell in the header
        table_a1.find("thead tr td,thead tr th").slice(1).remove();
        //and remove the entire tbody
        table_a1.find('tbody').remove();
        //set the first (and should be only remaining) cell to have the proper width/height
        table_a1.find("thead tr td,thead tr th").eq(0).width(table_a1_width).height(table_a1_height);
        //table positionin' stuff
        table_a1.css({'width':table_a1_width,'height':table_a1_height,"position":"absolute","left":0,"top":0}).addClass('tableFreeze_a1');
        //add to div
        div.append(table_a1);

    });
});
</script>