Question

我想修改表格中的标题和左侧列。

但我发现只有一个合适的解决方案。这是链接：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插件，我建议你使用带有fixedcolumns插件的http://www.datatables.net/（只需配置它就可以正常运行:)）

如果没有，你将最终得到解决方案，你可以用一种方式拆分表，如果你想要可滚动的表，你将不得不使用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>

如何冻结表的标题和左列

2 个答案: