如何在可滚动 div 中冻结 html 表的第一列和最后一列? [英] How do I freeze the first and last columns of an html table in a scrollable div?

问题描述

我有一个表格，它有一个标题行，还有一个标题列和一个总列，中间有几列.

像这样:

Name Score 1 Score 2 ... Total-------------------------------约翰福音 5 6 86将 3 7 82尼克 7 1 74

整个表格被定义在一个固定宽度的可滚动 div 中，因为可能有大量的Score"行并且我有一个固定宽度的页面布局.

<div id="tableWrapper" style="overflow-x: auto; width: 500px;"><table id="scoreTable">...

我希望第一列 (Name) 和最后一列 (Total) 在内部列滚动时保持可见.

谁能帮我解决这个问题?

我的意思是仅水平滚动 - 更改为指定.

<小时>

更新:我已经为自己解决了这个问题，并在下面发布了答案.如果您需要更多信息，请告诉我 - 这有点麻烦，我不希望其他人必须重写所有内容.

解决方案

我已经尝试了一些方法(感谢所有帮助过的人)，下面是我想出的使用 jQuery 的方法.它似乎在我测试过的所有浏览器中都运行良好.随意取用它，随心所欲地使用它.对我来说，下一步将把它变成一个可重用的 jQuery 插件.

总结:

我从一个包含所有内容的普通表 (Id="ladderTable") 开始，我编写了三种方法 - 一种用于去除第一列，一种用于剥离最后一列，并固定行高.

stripFirstColumn 方法创建一个新表 (Id="nameTable")，遍历原始表并取出第一列，并将这些单元格添加到 nameTable.

stripLastColumn 方法的作用基本相同，只是它取出最后一列并将单元格添加到名为 totalTable 的新表中.

fixHeights 方法查看每个表格中的每一行，计算最大高度，并将其应用于相关表格.

在文档就绪事件中，我按顺序调用了所有三个方法.请注意，所有三个表都向左浮动，因此它们只会水平堆叠.

HTML 结构:

当前梯形图
<div id="nameTableSpan" style="float:left;width:100px;border-right:2px 纯灰色;"></div><div id="ladderDiv" style="float:left;width:423px;overflow:auto;border:1px 纯灰色;margin-top:-1px;"><table id="ladderTable" class="ladderTable"><头><tr><td>名称</td><td>第一轮</td>... <td>第 50 轮</td><td class="scoreTotal">Total</td></tr></thead><tr><td>鲍勃</td><td>11</td>... <td>75</td><td>421</td></tr>...(更多分数)

<div id="totalTableSpan" style="float:left;width:70px;border-left:2px 纯灰色;"></div>

jQuery:

function stripFirstColumn() {//拉出第一列:var nt = $('<table id="nameTable" cellpadding="3" cellspacing="0" style="width:100px;"></table>');$('#ladderTable tr').each(function(i){nt.append('<tr><td style="color:'+$(this).children('td:first').css('color')+'">'+$(this).children('td:first').html()+'</td></tr>');});nt.appendTo('#nameTableSpan');//删除原来的第一列$('#ladderTable tr').each(function(i){$(this).children('td:first').remove();});$('#nameTable td:first').css('background-color','#8DB4B7');}函数 stripLastColumn() {//拉出最后一列:var nt = $('<table id="totalTable" cellpadding="3" cellspacing="0" style="width:70px;"></table>');$('#ladderTable tr').each(function(i){nt.append('<tr><td style="color:'+$(this).children('td:last').css('color')+'">'+$(this).children('td:last').html()+'</td></tr>');});nt.appendTo('#totalTableSpan');//删除原来的最后一列$('#ladderTable tr').each(function(i){$(this).children('td:last').remove();});$('#totalTable td:first').css('背景色','#8DB4B7');}函数 fixHeights() {//改变高度:var curRow = 1;$('#ladderTable tr').each(function(i){//获取高度var c1 = $('#nameTable tr:nth-child('+curRow+')').height();//第 1 列var c2 = $(this).height();//第 2 列var c3 = $('#totalTable tr:nth-child('+curRow+')').height();//第 3 列var maxHeight = Math.max(c1, Math.max(c2, c3));//$('#log').append('Row '+curRow+' c1=' + c1 +' c2=' + c2 +' c3=' + c3 +' 最大高度 = '+maxHeight+'<br/>');//设置高度//$('#nameTable tr:nth-child('+curRow+')').height(maxHeight);$('#nameTable tr:nth-child('+curRow+') td:first').height(maxHeight);//$('#log').append('NameTable: '+$('#nameTable tr:nth-child('+curRow+')').height()+'<br/>');//$(this).height(maxHeight);$(this).children('td:first').height(maxHeight);//$('#log').append('MainTable: '+$(this).height()+'<br/>');//$('#totalTable tr:nth-child('+curRow+')').height(maxHeight);$('#totalTable tr:nth-child('+curRow+') td:first').height(maxHeight);//$('#log').append('TotalTable: '+$('#totalTable tr:nth-child('+curRow+')').height()+'<br/>');curRow++;});如果($.browser.msie)$('#ladderDiv').height($('#ladderDiv').height()+18);}$(document).ready(function() {带第一列()；stripLastColumn();固定高度()；$("#ladderDiv").attr('scrollLeft', $("#ladderDiv").attr('scrollWidth'));//滚动到最后一轮});

如果您有任何疑问或有任何不清楚的地方，我非常乐意提供帮助.

我花了很长时间才发现没有什么可以真正重用的，而且写这篇文章也花了更长的时间.我讨厌有人遇到同样的麻烦.

I have a table which has a header row, but also a header column and a total column with several columns in between.

Something like this:

Name    Score 1    Score 2  ...  Total
--------------------------------------
John       5          6            86
Will       3          7            82
Nick       7          1            74

The entire table is defined inside a fixed-width scrollable div because there are likely to be a large number of "Score" rows and I have a fixed-width page layout.

<div id="tableWrapper" style="overflow-x: auto; width: 500px;">
    <table id="scoreTable">
        ...
    </table>
</div>

What I would like is for the first (Name) and last (Total) columns to remain visible while the inner columns scroll.

Can anyone help me with this?

Edit: I mean horizontal scrolling only - changed to specify that.

---

Update: I've solved this problem for myself and have posted the answer below. Let me know if you need any more information - this was a bit of a pain to do and I'd hate for someone else to have to rewrite everything.

解决方案

I've experimented with a few methods (thanks to everyone who helped) and here's what I've come up with using jQuery. It seems to work well in all browsers I tested. Feel free to take it and use it however you wish. Next step for me will be turning it into a reusable jQuery plugin.

Summary:

I started with a normal table with everything in it (Id="ladderTable"), and I wrote Three methods - one to strip the first column, one to strip the last column, and one to fix the row heights.

The stripFirstColumn method creates a new table (Id="nameTable"), traverses the original table and takes out the first column, and adds those cells to the nameTable.

The stripLastColumn method does basically the same thing, except it takes out the last column and adds the cells to a new table called totalTable.

The fixHeights method looks at each row in each table, calculates the maximum height, and applies it to the related tables.

In the document ready event, I called all three methods in order. Note that all three tables float left so they'll just stack horizontally.

The HTML Structure:

<h1>Current Ladder</h1> 
<div id="nameTableSpan" style="float:left;width:100px;border-right:2px solid gray;"></div> 
<div id="ladderDiv" style="float:left;width:423px;overflow:auto;border:1px solid gray;margin-top:-1px;"> 
    <table id="ladderTable" class="ladderTable">
        <thead> 
            <tr><td>Name</td><td>Round 1</td> ... <td>Round 50</td><td class="scoreTotal">Total</td></tr>
        </thead>
        <tr><td>Bob</td><td>11</td> ... <td>75</td><td>421</td></tr>
           ... (more scores)
    </table>
</div>
<div id="totalTableSpan" style="float:left;width:70px;border-left:2px solid gray;"></div> 

The jQuery:

function stripFirstColumn() {                
    // pull out first column:
    var nt = $('<table id="nameTable" cellpadding="3" cellspacing="0" style="width:100px;"></table>');
    $('#ladderTable tr').each(function(i)
    {
        nt.append('<tr><td style="color:'+$(this).children('td:first').css('color')+'">'+$(this).children('td:first').html()+'</td></tr>');
    });
    nt.appendTo('#nameTableSpan');
    // remove original first column
    $('#ladderTable tr').each(function(i)
    {
        $(this).children('td:first').remove();
    });
    $('#nameTable td:first').css('background-color','#8DB4B7');
}

function stripLastColumn() {                
    // pull out last column:
    var nt = $('<table id="totalTable" cellpadding="3" cellspacing="0" style="width:70px;"></table>');
    $('#ladderTable tr').each(function(i)
    {
        nt.append('<tr><td style="color:'+$(this).children('td:last').css('color')+'">'+$(this).children('td:last').html()+'</td></tr>');
    });
    nt.appendTo('#totalTableSpan');
    // remove original last column
    $('#ladderTable tr').each(function(i)
    {
        $(this).children('td:last').remove();
    });
    $('#totalTable td:first').css('background-color','#8DB4B7');
}

function fixHeights() {
    // change heights:
    var curRow = 1;
    $('#ladderTable tr').each(function(i){
        // get heights
        var c1 = $('#nameTable tr:nth-child('+curRow+')').height();    // column 1
        var c2 = $(this).height();    // column 2
        var c3 = $('#totalTable tr:nth-child('+curRow+')').height();    // column 3
        var maxHeight = Math.max(c1, Math.max(c2, c3));

        //$('#log').append('Row '+curRow+' c1=' + c1 +' c2=' + c2 +' c3=' + c3 +'  max height = '+maxHeight+'<br/>');

        // set heights
        //$('#nameTable tr:nth-child('+curRow+')').height(maxHeight);
        $('#nameTable tr:nth-child('+curRow+') td:first').height(maxHeight);
        //$('#log').append('NameTable: '+$('#nameTable tr:nth-child('+curRow+')').height()+'<br/>');
        //$(this).height(maxHeight);
        $(this).children('td:first').height(maxHeight);
        //$('#log').append('MainTable: '+$(this).height()+'<br/>');
        //$('#totalTable tr:nth-child('+curRow+')').height(maxHeight);
        $('#totalTable tr:nth-child('+curRow+') td:first').height(maxHeight);
        //$('#log').append('TotalTable: '+$('#totalTable tr:nth-child('+curRow+')').height()+'<br/>');

        curRow++;
    });

    if ($.browser.msie)
        $('#ladderDiv').height($('#ladderDiv').height()+18);
}

$(document).ready(function() {
    stripFirstColumn();
    stripLastColumn();
    fixHeights();
    $("#ladderDiv").attr('scrollLeft', $("#ladderDiv").attr('scrollWidth'));    // scroll to the last round
});

If you have any questions or if there's anything that wasn't clear, I'm more than happy to help.

It took me quite a while to work out that there was nothing that I could really reuse and it took a bit longer to write this. I'd hate for someone to go to the same trouble.

这篇关于如何在可滚动 div 中冻结 html 表的第一列和最后一列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！