javascript 如何创建包含 colspans 的固定表格标题行？

Question

提问by KM.

I have a large dynamic table created from database data. I need the column heading rows to remain fixed and scroll the rows an necessary.

我有一个从数据库数据创建的大型动态表。我需要列标题行保持固定并滚动必要的行。

I have tried numerous scripts all over the web trying to get this to work properly. I'd like to keep this simple and easy on browser, since some target computers are rather lame.

我在网络上尝试了许多脚本，试图让它正常工作。我想在浏览器上保持这个简单和容易，因为一些目标计算机相当蹩脚。

Here is what I'm working with:

这是我正在使用的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Sample</title>
  </head>

  <body>
    <br><br><br><br>

    <table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
      <tr bgcolor='gray'>
        <td>
          <br><br><br>
          need the blue column heading rows to remain fixed, and scroll the green rows:<br>

    <table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
      <thead>

        <tr>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
          <th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
          <th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 3</th>
          <th width="150px" style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 4<br>more<br>more</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 5</th>
        </tr>
        <tr>
            <th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-b</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-c</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-d</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-e</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td bgcolor="PaleGreen" colspan="3" align="center" valign="middle">Col 1<br>more</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[1]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[2]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[3]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[4]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[5]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[6]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[7]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
        </tr>
      </tbody>
    </table>

          <br><br><br><br>
        </td>
      </tr>
    </table>

    <br><br><br><br><br><br>

  </body>

</html>

Answer 1

采纳答案by Nope

You can have the header row(s) in a separate table to the data rows using the same colgroup settings in both.

您可以在单独的表格中将标题行与数据行使用相同的 colgroup 设置。

The below works fine in IE9, FF14.01 and Chrome 20.0.1132.57.

以下在 IE9、FF14.01 和 Chrome 20.0.1132.57 中运行良好。

<table border="1">
    <colgroup>
        <td width="100px">Column 1</td>
        <td width="100px">Column 2</td>
        <td width="100px">Column 3</td>
        <td width="16px" style="background-color: gray;"><td>
    </colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
    <table border="1">
        <colgroup>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </colgroup>
        <tbody>
            <tr>
                <td>Row 1 - Cell 1</td>
                <td>Row 1 - Cell 2</td>
                <td>Row 1 - Cell 3</td>
            </tr>
            <tr>
                // rest omitted, see DEMO for full table
            </tr>
        </tbody>
    </table>
</div>

?See DEMO

?见演示

Edit -- August 3rd 2012

编辑 - 2012 年 8 月 3 日

The only way I was able to get it to work was with a bit of trickery alright. I separated the header as in the first example. But due to the extremly custom multiple different widths in the header, the most reliable way, keeping everything aligned, was to copy the throws alsointo the second table but without text inside. That made them "invisible" but forced the columns in the second table to align as expected.

我能够让它工作的唯一方法是使用一些技巧。我在第一个示例中分隔了标题。但是由于标题中的自定义多个不同宽度，保持所有内容对齐的最可靠方法是将th行也复制到第二个表中，但里面没有文本。这使它们“不可见”，但迫使第二个表中的列按预期对齐。

See DEMO

见演示

It feels a bit hackish and I'm sure there is a proper solution but it seems to work well in the meantime.

感觉有点hackish，我确信有一个合适的解决方案，但在此期间它似乎运行良好。

Edit -- August 7th 2012

编辑 - 2012 年 8 月 7 日

Is there any way to "box" this entire table construct up in up 100% of the screen width and change the height for height:150px; to something more dynamic, like $(window).height()-200

有什么方法可以将整个表格结构“装箱”到屏幕宽度的 100% 并更改 height:150px; 更动态的东西，比如 $(window).height()-200

There surely is a more elegant way of doing it but I was able to make the table more dynamic.

肯定有一种更优雅的方式来做到这一点，但我能够使表格更具活力。

The width was less of an issue as I capped the toal width at about 95% and hard-capped the table(s) at a min-width: 600px;for the header and a min-width: 584pxfor the body, thus ensuring the table stays aligned at all times.

宽度不是一个问题，因为我将总宽度限制在 95% 左右，并将表格硬盖min-width: 600px;在标题的 amin-width: 584px和正文的 a 处，从而确保表格始终保持对齐。

For the dynamic height I used jQuery, binding a resize function to the windows resize event:

对于动态高度，我使用 jQuery，将 resize 函数绑定到 windows resize 事件：

$(document).ready(function() {
    resizeTableHeight();

    $(window).on("resize.resizeTableHeight", function() {
        resizeTableHeight();
    });
});

function resizeTableHeight() {
    var headerHeight = $("#tableHeaderContainer").height();
    var documentHeight = $(document).height();
    var spacingHeight = 50;

    $("#tableBodyContainer").height(documentHeight - headerHeight - spacingHeight);
}?

When you open the fiddle the original height of the fiddle window will most likely be to high to see the dynamics. Just move the divider and shrink the view to see the re-sizing at work.

当您打开小提琴时，小提琴窗口的原始高度很可能会很高以查看动态。只需移动分隔线并缩小视图即可查看工作中的重新调整大小。

Do notforget to unbind that event when you are not showing the grid as it still will execute on resize every time.

千万不能忘了解除绑定，当你无法显示，因为它仍然会执行调整大小，每次对电网事件。

See dynamic-grid DEMO

见动态网格演示

You will notice some styles are in the css (top-right) in the fiddle while others are not. My CSS is not very strong and some styles when I moved them from the elements into the CSS area started to be irgnored. I moved into CSS what I could and left the rest hard-coded not to break it. I'm sure someone working with CSS everyday will be able to sort that out for you.

您会注意到一些样式在 fiddle 的 css（右上角）中，而其他样式则没有。我的 CSS 不是很强大，当我将它们从元素移动到 CSS 区域时，一些样式开始被忽略。我尽可能地使用 CSS 并将其余部分硬编码以免破坏它。我相信每天使用 CSS 的人都能为您解决这个问题。

I also added some ids to some elements for CSS and for the jQuery as required.
I suppose for the CSS it can use classes instead. I leave that to you.

我还根据需要为 CSS 和 jQuery 的一些元素添加了一些 id。
我想对于 CSS，它可以使用类来代替。我把它留给你。

Summary
I'm sure there is a way more elegant way to achieve what you want and probably some script-wiz got a plugin for it. Until then this seems to work. What could also happen is that the columns start miss-aligning close to 600 pixels again if a lot of long data is entered into the columns but as stated, this is a very personalised solution and you may need to add some dynamic calculations for some widths with jQuery over time.

总结
我确信有一种更优雅的方式来实现你想要的东西，并且可能一些脚本向导为它提供了一个插件。在那之前，这似乎有效。还可能发生的情况是，如果在列中输入大量长数据，列再次开始错位接近 600 像素，但如前所述，这是一个非常个性化的解决方案，您可能需要为某些宽度添加一些动态计算随着时间的推移使用 jQuery。

Edit -- August 9th 2012

编辑 - 2012 年 8 月 9 日

Regarding setting the width of a td I mentioned in the comments. I fixed the issue with the long text in the first column using the classes I mentioned. Works in IE, FF and Chrome.

关于设置我在评论中提到的 td 的宽度。我使用我提到的类修复了第一列中长文本的问题。适用于 IE、FF 和 Chrome。

See DEMO

见演示

I used the logic mentioned in the comments. You might find a much better naming convention. I simply used the main-column+ a on/off switch per sub-column. this works out as follows for column 1 styles:

我使用了评论中提到的逻辑。您可能会发现更好的命名约定。我只是使用主列+每个子列的开/关开关。对于第 1 列样式，其计算方式如下：

.col01-000{
    width: 0px;
}
.col01-001{
    width: 75px;
}
.col01-010, .col01-100{
    width: 50px;
}
.col01-011, .col01-101{
    width: 125px;
}
.col01-110{
    width: 100px;
}

I have assigned the first td a class of col01-100which means 50px.
The second td has now a class of col01-011, indicating this td still belongs into the first main column but has a width of sub-column 2 (50px) and 3(75px). This adds up to 125px.

我已经为第一个 td 分配了一个类，col01-100其中50px.
第二个 td 现在有一个类col01-011，表明这个 td 仍然属于第一个主列，但具有子列 2 (50px) 和 3(75px) 的宽度。这加起来为 125px。

I hope this makes sense but if not I gladly continue the discussion in a chat and work the measurements out with you if that is something you want to apply.

我希望这是有道理的，但如果不是，我很乐意在聊天中继续讨论，并与你一起计算出你想要应用的测量结果。

So far I can see the measurements to be:

到目前为止，我可以看到测量结果是：

Col01

Col1 = colspan 3 over 175px
3 Sub-columns breaking 175px down as follows: 50px-50px-75px

Col1 = colspan 3 over 175px
3 个子列将 175px 分解如下：50px-50px-75px

Col02

Col2 = colspan 3 over 100px
3 Sub-columns breaking 100px down as follows: 40px-30px-30px

Col2 = colspan 3 over 100px
3个子列分解100px如下：40px-30px-30px

Col03

Col3 = colspan 1 over 100px
No sub-columns

Col3 = colspan 1 over 100px
没有子栏

Col04

Col4 = colspan 5 over 150px
5 sub-columns breaking 150px down as follows: 30px-30px-30px-30px-30px

Col4 = colspan 5 over 150px
5 个子列将 150px 分解如下：30px-30px-30px-30px-30px

Col05

Col5 = colspan 1 over 100px
No sub-columns

Col5 = colspan 1 over 100px
没有子栏

Answer 2

回答by Selvakumar Arumugam

Edit:Fix for fixed position on window resize:

编辑：修复窗口调整大小的固定位置：

http://jsfiddle.net/eReBn/13/

Complete Code:

完整代码：

$(function() {
    (function($) {
        $.fn.fTable = function(o) {

            var tableTmpl = '<table id="XYZ_fixed" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base"></table>';

            this.wrap('<div class="fTable_container" />');
            var fc = this.parent();
            fc.css('width', this.width() + 18);

            this.wrap('<div class="fTable_rContainer" />');
            var rc = this.parent();
            rc.css('height', o.height);

            var fTable = $(tableTmpl);
            fTable
             .addClass('fTable_fixedHead')
             .html(this.find('thead').clone())
             .prependTo(rc);

            $(window).on('scroll resize', function () {
                console.log(isScroll());
                if (isScroll()) {
                    fTable.css('left', $(this).scrollLeft() * -1);
                } else {
                    fTable.css('left', '');
                }
            });
        };

        function isScroll() {
           var root= document.compatMode=='BackCompat'?
               document.body : document.documentElement;
            return root.scrollWidth>root.clientWidth;
        }

    })(jQuery);

    $('#XYZ').fTable({
        height: 300
    });
});

Edit:Try below solution.. since you were ok to manually add styles and adjust table.

编辑：尝试以下解决方案..因为您可以手动添加样式和调整表格。

DEMO:http://jsfiddle.net/eReBn/12/embedded/result/

演示：http : //jsfiddle.net/eReBn/12/embedded/result/

Manual:

手动的：

a. Copy below CSS to your style sheet

一个。将下面的 CSS 复制到您的样式表

.fTable_rContainer {
    position: relative;
    overflow: auto;    
    height: 300px; /* Height of the table */
}

.fTable_container {
    width: 643px;  /* Total width of the table you set + 18px (scroll size) */
}

.fTable_fixedHead {
    position: fixed; 
}

.fTable_rContainer {
    position: relative;
    overflow: auto;    
    height: 300px; /* Height of the table */
}

.fTable_container {
    width: 643px;  /* Total width of the table you set + 18px (scroll size) */
}

.fTable_fixedHead {
    position: fixed; 
}

b. Wrap the Table with div class="fTable_container"

湾用 div 包裹表格class="fTable_container"

c. Copy the theadpart of the original table and move to a new table as in DEMO.

C。复制thead原始表的一部分并像在 DEMO 中一样移动到一个新表。

d. Add class fTable_fixedHeadto the new table

d. 将类添加fTable_fixedHead到新表

Automated with some scripts:

使用一些脚本自动化：

DEMO:http://jsfiddle.net/eReBn/11/embedded/result/

演示：http : //jsfiddle.net/eReBn/11/embedded/result/

I tried to solve it using 2 tables,

我试图用 2 个表来解决它，

Original table (untouched)
Fixed Header table(absolute positioned) over the original table

原始表（未触及）
固定表头表（绝对定位）在原始表上

Check it out and let me know if you like it.

检查一下，如果你喜欢它，请告诉我。

DEMO

演示

Tested in Firefox & Chrome. [Will test on other browsers later today]

在 Firefox 和 Chrome 中测试。[今天晚些时候将在其他浏览器上测试]

Full code @ http://jsfiddle.net/eReBn/7/

完整代码@ http://jsfiddle.net/eReBn/7/

JS:

JS：

$(function() {
   (function($) {
     $.fn.fTable = function(o) {
        /* Preserve the attr list from original table    */
        var el = this[0], arr = [], it;
        for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {

          it = attrs.item(i);

          if (it.nodeName == 'id') {
           arr.push(it.nodeName + '="' + it.nodeValue + '_fixed"');
          } else {
           arr.push(it.nodeName + '="' + it.nodeValue + '"');
          }
        }

        var tableTmpl = '<table ' + arr.join(' ') + '></table>';

        /* Wrap it inside div's */
        this.wrap('<div class="fTable_container" />');
        this.wrap('<div class="fTable_rContainer" />');

        var rc = this.parent();

        /* Clone the thead and add it to the fixed table head */
        $(tableTmpl)
          .addClass('fTable_fixedHead')
          .html(this.find('thead').clone())
          .prependTo(rc);

        /* Position the fixed head table on scroll */
        rc.scroll(function() {
          rc.find('.fTable_fixedHead').css('top', $(this).scrollTop());
        });

        var _that = this;
        rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);

        /* Position the left on resize*/
        $(window).resize(function() {
          rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
        });
     };

     /* Position fix for webkit browsers */
     jQuery.fn.aPosition = function() {
        thisLeft = this.offset().left;
        thisTop = this.offset().top;
        thisParent = this.parent();
        parentLeft = thisParent.offset().left;
        parentTop = thisParent.offset().top;
        return {
           left: thisLeft - parentLeft,
           top: thisTop - parentTop
        }
     }
  })(jQuery);

});

Usage:

用法：

$('#XYZ').fTable({
    height: 300
});

Answer 3

回答by Hymanwanders

I may as well provide an option for you. This assumes the browser window is being scrolled.

我也可以为你提供一个选择。这假设浏览器窗口正在滚动。

The idea here is that a clone of your table is made and everything but the theadis stripped out of it. It is fixed to the top of the viewport and hidden.

这里的想法是制作一个表的克隆，然后从表thead中删除除表之外的所有内容。它固定在视口的顶部并隐藏。

When the user scrolls past the top of the table, the cloned table is displayed. I have also included a resizeevent to handle changes to the viewport's width. There are some minor hiccups with keeping the fixed header and the table aligned horizontally, but it's not a big issue.

当用户滚动经过表格顶部时，会显示克隆的表格。我还包含了一个resize事件来处理视口宽度的变化。保持固定标题和表格水平对齐有一些小问题，但这不是大问题。

Here is a demo using your table as source (I moved a lot of the inline styles to CSS just to make things easier to read):

这是一个使用您的表格作为源的演示（我将很多内联样式移到 CSS 中，只是为了使内容更易于阅读）：

jsFiddle DEMO

jsFiddle 演示

$(function(){
    var $window = $(window),
        stickyTable = $('#XYZ'),
        stickyHeader = stickyTable.clone(true),
        tableTop = stickyTable.offset().top,
        isSticky = false;

    handleScroll();

    $window.on({
        scroll: handleScroll,
        resize: handleResize
    });


    stickyHeader.find('tbody').remove();
    stickyHeader.find('tfoot').remove();

    stickyHeader.addClass('sticky-header').appendTo('body');

    function handleScroll() {
        var scrollTop = $window.scrollTop();

        if(scrollTop > tableTop && !isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px').show();
            isSticky = true;
        } else if(scrollTop <= tableTop && isSticky) {
            stickyHeader.hide();
            isSticky = false;
        }
    }

    function handleResize() {
        if(isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px');
        }
    }
});?

Answer 4

回答by designerWhoCodes

We used DataTables.netand solved a very similar problem quite nicely. Here is an examplefrom their website with an advanced multi-row header. You can also sort within your sub-column categories.

我们使用了DataTables.net并很好地解决了一个非常相似的问题。这是他们网站上的一个带有高级多行标题的示例。您还可以在子列类别中进行排序。

Answer 5

回答by ShaunOReilly

Some of the previously written answers were brilliant!!

以前写的一些答案很棒！！

I tested this in Google Chrome most of the time, due to the brilliant Chrome Developer tools for debugging Javascript on the fly, and tweaking css in realtime.

我大部分时间都在 Google Chrome 中对此进行了测试，这得益于出色的 Chrome 开发人员工具，可用于即时调试 Javascript 并实时调整 css。

If you added jQuery with a clone function in it, you could achieve a scrollable table without squashing it into a page height, and have a floating Table header wherever you want it

如果您在其中添加了带有克隆功能的 jQuery，则可以在不将其压缩到页面高度的情况下实现可滚动的表格，并且在您想要的任何位置都有一个浮动的表格标题

The following code will clone the table header:

以下代码将克隆表头：

jQuery(document).ready(function () {
    jQuery("body").append("<table class='tableheader' align='center' border='1' width='625' cellspacing='0' cellpadding='0'></table>");
    jQuery(".tableheader").append(jQuery(".base2 thead").clone());

Then you need to set some static variable, and catch the scrolling event:

然后你需要设置一些静态变量，并捕获滚动事件：

var headerToMove = jQuery(".tableheader");
var headerOffsetTop = headerToMove.offset().top;
var headerPosition = headerToMove.position();

jQuery(window).scroll(function () { scroll_post_header(); });

Then move the header up and down over the current header, but keep it on top of the page, if the current header scrolls out of the way.

然后将标题在当前标题上上下移动，但如果当前标题滚动到一边，请将其保持在页面顶部。

    function scroll_post_header() {
        var new_position = headerOffsetTop - jQuery(window).scrollTop();
        if (new_position < 0) { new_position = 0;}
        if (headerPosition.top != new_position) {
            headerToMove.css("top",new_position);
            //headerToMove.stop().animate({ 'top': new_position }, 300);
        }
        if (jQuery(window).scrollTop() < 15) { headerToMove.css("top",headerOffsetTop);}
    }
});

? Now ad some initial CSS to the header that will be cloned. You will need to find that sweet spot where your current header is from the top, but even this can be achieved via jQuery interrogation.

? 现在将一些初始 CSS 添加到将被克隆的标题。您需要找到当前标题从顶部开始的最佳位置，但即使这也可以通过 jQuery 查询来实现。

.tableheader {
    position: fixed;
    height: 80px;
    top: 160px;
    left: 2.5%;
    z-index: 1000;    
}

? The full working example can be found at: http://jsfiddle.net/webwarrior/YZ8cJ/142/

? 完整的工作示例可以在以下位置找到：http: //jsfiddle.net/webwarrior/YZ8cJ/142/

Hope this helps somewhat without changing any html.

希望这在不更改任何 html 的情况下有所帮助。

Answer 6

回答by Baylor Rae'

If you .clone()the theadand put it in the table all of the columns retain their original width.

如果您.clone（）的thead，并把它放在表中的所有列保留其原有的宽度。

Update:I realized that IE 6 and 7 were having problems and I fixed them. The issue was that those versions of IE don't allow you to position the theaddirectly. As a result, I changed it so that it moves the thead trinstead, but only if the browser is IE < 8.

更新：我意识到 IE 6 和 7 有问题，我修复了它们。问题是那些版本的 IE 不允许您thead直接定位。结果，我改变了它，使它移动thead tr，但前提是浏览器是 IE < 8。

Another bug was that IE < 9 had problems with .prependTo(). I'm not sure if it is just IE Tester or not, but I resolved the issue by using .after().

另一个错误是 IE < 9 在.prependTo(). 我不确定它是否只是 IE Tester，但我通过使用.after().

Updated Demo

更新演示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  // http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
  var Browser = {
    version: function() {
    var version = 999; // we assume a sane browser
      if (navigator.appVersion.indexOf("MSIE") != -1) {
        // bah, IE again, lets downgrade version number
        version = parseFloat(navigator.appVersion.split("MSIE")[1]);
      }

      return version;
    }
  }

  var $thead = $('#XYZ thead'),
      $new_thead = $thead.clone().hide(),
      $window = $(window),

      distance_from_top = $thead.offset().top,
      did_scroll = false; // http://ejohn.org/blog/learning-from-twitter/

  // for IE <= 7
  var $tr_1, $tr_2;

  // add the cloned thead
  $thead.after($new_thead);

  if( Browser.version() < 8 ) {
    $new_thead.find('tr').css({
      'position': 'absolute',
      'top': 0,
      'margin-left': -1
    });

    $tr_1 = $new_thead.find('tr:first');
    $tr_2 = $new_thead.find('tr:last').css('top', $tr_1.height());
  }else {
    $new_thead.css({
    'position': 'fixed',
    'width': $thead.width(),
    'top': 0
    });
  }

  $window.scroll(function() {
    if( Browser.version() < 8 ) {
      did_scroll = true;
    }

    if( $window.scrollTop() >= distance_from_top ) {
      $new_thead.show();
    }else {
      $new_thead.hide();
    }
  });

  setInterval(function() {
    if( did_scroll ) {
    did_scroll = false;
      $tr_1.css('top', $window.scrollTop());
      $tr_2.css('top', $tr_1.height() + $window.scrollTop());
    }
  }, 250);
</script>

Edit

编辑

I didn't realize that K.M.wanted a fixed height table. If you look at my example above you'll see that the table header is fixed if the browser scrolls past the top of the table. However, from my understanding this is not what he/she wanted.

我没有意识到KM想要一张固定高度的桌子。如果您查看我上面的示例，您会看到如果浏览器滚动到表格顶部，表格标题是固定的。然而，据我所知，这不是他/她想要的。

I have tested this in the following browsers on my Mac.

我已在 Mac 上的以下浏览器中对此进行了测试。

Safari (5.1.7)
Firefox (11.0)
Chrome (21.0.1180.75)

Safari (5.1.7)
火狐 (11.0)
铬 (21.0.1180.75)

And I have tested this in Windows 7 with:

我已经在 Windows 7 中测试了这个：

IE 8 and 9 using IE Tester
Firefox (5.0.1, 6.0.2, 7.0.1, 8.0.1, 10.0.2)
Chrome (12.0.742.91)
Safari (5.1.5)

使用 IE Tester 的 IE 8 和 9
火狐（5.0.1、6.0.2、7.0.1、8.0.1、10.0.2）
铬 (12.0.742.91)
Safari (5.1.5)

It is broken in IE 6 and 7, but I didn't look into seeing if there was a fix.

它在 IE 6 和 7 中被破坏，但我没有考虑是否有修复。

Demo

演示

var table = $('#XYZ'),
    thead = table.find('thead'),
    fixed_thead = thead.clone(),

    // create a copy of the original table
    fixed_thead_wrapper = $('<table />', {
      'id': 'fixed_thead_wrapper',
      'align': 'center',
      'width': table.outerWidth(),
      'border': '1',
      'cellspacing': 0,
      'cellpadding': 0              
    }).insertBefore(table),

    // this forces the table to be in a scrollable area
    table_wrapper = $('<div />', {
      'id': 'fixed_table_wrapper',
      'height': 300,
      css: {
        'overflow': 'auto'
      }
    });

// add the cloned thead to the new table
fixed_thead_wrapper.append(fixed_thead);

// hide the original thead.
// this is a very hackish way of doing this, but I'm not sure of a better way as of right now
table.css({
  'position': 'relative',
  'top': fixed_thead_wrapper.height() * -1
});

// wrap the original table
table.wrap(table_wrapper);

// line the tables up now that the scrollbar is present
fixed_thead_wrapper.css({
  'position': 'relative',
  'left': table.offset().left - fixed_thead_wrapper.offset().left
});

Answer 7

回答by Baylor Rae'

I have an idea for you. You will split your table into two tables. One of them will acting as the header and the second will acting as the rest of all cells and rows. The trick in the following: Placing two fixed width and height divs vertical adjacent to themselves. the upper one will loads the header table and the n the lower will acts for the table body. in the lower div you will set vertical overflow. By this way you will have simple solution's that supports your header move with data scrolling.

我有一个想法给你。您将把您的桌子分成两张桌子。其中一个将充当标题，第二个将充当所有单元格和行的其余部分。技巧如下：将两个固定宽度和高度的 div 垂直放置在它们自身附近。上面的将加载标题表，而下面的将加载表体。在较低的 div 中，您将设置垂直溢出。通过这种方式，您将拥有简单的解决方案，支持您的标题移动和数据滚动。

Answer 8

回答by Cypress Frankenfeld

Check out HTML table with fixed headers?. It is the best answer to the general question "how can I freeze a table header?"

查看带有固定标题的 HTML 表格？. 这是对“如何冻结表头？”这一一般问题的最佳答案。

Answer 9

回答by Vijay Sarin

Check this Fiddle

检查这个小提琴

Here is the Code. Working fine in all browsers...!

这是代码。在所有浏览器中都能正常工作......！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Scrollable Table with Fixed Header</title>
<meta http-equiv="language" content="en-us">

<script type="text/javascript">
    function removeClassName (elem, className) {
        elem.className = elem.className.replace(className, "").trim();
    }

    function addCSSClass (elem, className) {
        removeClassName (elem, className);
        elem.className = (elem.className + " " + className).trim();
    }

    String.prototype.trim = function() {
        return this.replace( /^\s+|\s+$/, "" );
    }

    function stripedTable() {
        if (document.getElementById && document.getElementsByTagName) {  
            var allTables = document.getElementsByTagName('table');
            if (!allTables) { return; }

            for (var i = 0; i < allTables.length; i++) {
                if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
                    var trs = allTables[i].getElementsByTagName("tr");
                    for (var j = 0; j < trs.length; j++) {
                        removeClassName(trs[j], 'alternateRow');
                        addCSSClass(trs[j], 'normalRow');
                    }
                    for (var k = 0; k < trs.length; k += 2) {
                        removeClassName(trs[k], 'normalRow');
                        addCSSClass(trs[k], 'alternateRow');
                    }
                }
            }
        }
    }

    window.onload = function() { stripedTable(); }
</script>

<style type="text/css">

body {
    background: #FFF;
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10px;
    padding: 0
}

table, td, a {
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
    font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0
}

h2 {
    font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0
}

h3 {
    font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #008000;
    margin: 0 0 15px 0
}

div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px;
    overflow: auto;
    width: 756px
}

html>body div.tableContainer {
    overflow: hidden;
    width: 756px
}

div.tableContainer table {
    float: left;
    width: 740px
}

html>body div.tableContainer table {
    width: 756px
}

thead.fixedHeader tr {
    position: relative
}

html>body thead.fixedHeader tr {
    display: block
}

thead.fixedHeader th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
}

thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    color: #FFF;
    display: block;
    text-decoration: none;
    width: 100%
}

thead.fixedHeader a:hover {
    color: #FFF;
    display: block;
    text-decoration: underline;
    width: 100%
}

html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
    background: #EEE;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px
}

html>body thead.fixedHeader th {
    width: 200px
}

html>body thead.fixedHeader th + th {
    width: 240px
}

html>body thead.fixedHeader th + th + th {
    width: 316px
}


html>body tbody.scrollContent td {
    width: 200px
}

html>body tbody.scrollContent td + td {
    width: 240px
}

html>body tbody.scrollContent td + td + td {
    width: 300px
}
</style>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
    <tr class="alternateRow">
        <th><a href="">Header 1</a></th>
        <th><a href="">Header 2</a></th>
        <th><a href="">Header 3</a></th>
    </tr>
</thead>
<tbody class="scrollContent">
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
        <td>End of Cell Content 1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
    </tr>
</tbody>
</table>
</div>
</body></html>

Answer 10

回答by Mark Pieszak - Trilon.io

I've always used this super easy to use Plugin that handles it as easily as $('#tableID').fixedtableheader();

我一直在使用这个超级容易使用的插件，它可以轻松地处理它 $('#tableID').fixedtableheader();

Works amazingly, very lightweight and flexible.

效果惊人，非常轻巧且灵活。

http://fixedheadertable.com/

javascript 如何创建包含 colspans 的固定表格标题行？

提问by KM.

采纳答案by Nope

回答by Selvakumar Arumugam

回答by Hymanwanders

回答by designerWhoCodes

回答by ShaunOReilly

回答by Baylor Rae'

Edit

编辑

回答by Baylor Rae'

回答by Cypress Frankenfeld

回答by Vijay Sarin

回答by Mark Pieszak - Trilon.io

相关推荐

最近更新

标签

javascript 如何创建包含 colspans 的固定表格标题行？

提问by KM.

采纳答案by Nope

回答by Selvakumar Arumugam

回答by Hymanwanders

回答by designerWhoCodes

回答by ShaunOReilly

回答by Baylor Rae'

Edit

编辑

回答by Baylor Rae'

回答by Cypress Frankenfeld

回答by Vijay Sarin

回答by Mark Pieszak - Trilon.io

相关推荐

javascript 使用 jQuery 添加一些文本

javascript 美化文本区域内的代码

javascript facebook API 如何调用 onlogin

在页面加载之前执行 Javascript

相关推荐

最近更新

标签