如何创建包含 colspan 的固定表头行

标题行放在单独的表中，以使用两者中相同的 colgroup 设置将数据行放在单独的表中。

以下内容在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>

查看演示

编辑 -- 2012 年 8 月 3 日

我能够让它工作的唯一方法是使用一些诡计。我像第一个示例一样分隔了标题。但是由于标题中极端自定义多个不同宽度，最可靠的方法是将所有内容对齐，将th行也复制到第二个表中，但内部没有文本。这使得它们"不可见"，但强制第二个表中的列按预期对齐。

查看演示

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

编辑 -- 2012年8月7日

有没有办法将整个表结构"装箱"在 100% 的 屏幕宽度并更改高度：150px;到某事 更动态，如 $(window(.height((-200

当然有一种更优雅的方法，但我能够使桌子更有活力。

宽度问题不大，因为我将 toal 宽度限制在大约 95%，并将桌子硬封在标题的min-width: 600px;和正文的min-width: 584px，从而确保桌子始终保持一致。

对于动态高度，我使用了jQuery，将调整大小函数绑定到窗口调整大小事件：

$(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);
}​

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

当您不显示网格时，不要忘记取消绑定该事件，因为它每次都会在调整大小时执行。

查看动态网格演示

您会注意到有些样式在小提琴的 css(右上角(中，而其他样式则不是。我的CSS不是很强大，当我将它们从元素移动到CSS区域时，一些样式开始变得不可思议。我尽我所能地进入了CSS，其余的都硬编码了，以免破坏它。我相信每天使用CSS的人将能够为您解决这个问题。

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

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

编辑 -- 2012 年 8 月 9 日

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

查看演示

我使用了评论中提到的逻辑。您可能会找到更好的命名约定。我只是使用主列+每个子列的开/关开关。对于第 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;
}

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

我希望这是有道理的，但如果不是，我很乐意在聊天中继续讨论，并在您想要应用的情况下与您一起制定测量结果。

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

Col01

• Col1 = 超过 175px 的 Colspan 3
• 3 个子列将 175px 细分如下：50px-50px-75px

科尔02

• Col2 = 超过 100px 的 colspan 3
• 3 个子列将 100px 细分如下：40px-30px-30px

科尔03

• Col3 = 超过 100px 的 colspan 1
• 无子列

科尔04

• Col4 = 超过 150 像素的 Colspan 5
• 5 个子列将 150px 细分如下：
30px-30px-30px-30px-30px-30px

科尔05

• Col5 = 超过 100px 的 colspan 1
• 无子列

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

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

完整代码：

$(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
    });
});

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

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

手动：

a. 将下面的 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; 
}

b. 用div class="fTable_container" 包裹表格

c. 复制原始表的thead部分，并移动到新表，如 DEMO 中所示。

d. 将类fTable_fixedHead添加到新表

使用一些脚本自动执行：

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

我尝试使用 2 张表来解决它，

1. 原始表(原样(
2. 固定标题表(绝对定位(在原始表上

看看它，让我知道你是否喜欢它。

演示

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

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

.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);      

}(;

用法：

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

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

我不妨为您提供一个选项。这假设浏览器窗口正在滚动。

这里的想法是制作表的克隆，并且除thead之外的所有内容都被剥离出来。它固定在视口的顶部并隐藏。

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

这是一个使用您的表格作为源代码的演示(我将许多内联样式移动到 CSS 只是为了让事情更易于阅读(：

js小提琴演示

$(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');
        }
    }
});​

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

我大部分时间都在谷歌浏览器中对此进行了测试，因为出色的Chrome Developer工具可以动态调试Javascript，并实时调整css。

如果您添加了带有克隆函数的jQuery，则可以在不将其压缩为页面高度的情况下实现可滚动的表，并在所需的任何位置具有浮动表标题。

以下代码将克隆表头：

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());

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

var headerToMove = jQuery(".tableheader");
var headerOffsetTop = headerToMove.offset().top;
var headerPosition = headerToMove.position();
jQuery(window).scroll(function () { scroll_post_header(); });

上上下移动标题，但如果当前标题滚动到不碍事，则将其保留在页面顶部。

    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);}
    }
});

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

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

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

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

如果你.clone((thead并将其放在表中，所有列都保留其原始宽度。

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

另一个错误是IE <9存在.prependTo()问题。我不确定它是否只是IE测试器，但我通过使用.after()解决了这个问题。

更新的演示

<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>

编辑

我没有意识到K.M.想要一张固定高度的桌子。如果您查看我上面的示例，您会发现如果浏览器滚动到表格顶部，表头是固定的。然而，据我了解，这不是他/她想要的。

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

1. 野生动物园 (5.1.7(
2. 火狐 (11.0(
3. 铬 (21.0.1180.75(

我已经在Windows 7中对此进行了测试：

1. 使用 IE 测试仪的 IE 8 和 9
火狐浏览器 (5.0.1， 6.0.2， 7.0.1，
2. 8.0.1， 10.0.2(
3. 铬 (12.0.742.91(
4. 野生动物园 (5.1.5(

它在IE 6和7中损坏了，但我没有查看是否有修复程序。

演示

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
});

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

工作惊人，非常轻巧和灵活。

http://fixedheadertable.com/

查看带有固定标题的 HTML 表？.这是一般问题"如何冻结表头？

检查这个小提琴

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

<!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>

我有一个想法给你。您将把表拆分为两个表。其中一个将充当标题，第二个将充当所有单元格和行的其余部分。诀窍如下：将两个固定宽度和高度的div 垂直放置在自身旁边。上面的一个将加载标题表，而下面的 N 个将用于表体。在较低的div 中，您将设置垂直溢出。通过这种方式，您将拥有简单的解决方案，支持通过数据滚动进行标题移动。

似乎最好的方法是两张桌子。 带有标题的外部表，以及一个大行，其中包含一个内部表。div应该是css'ed overflow：滚动或自动设置高度(通过css或javascript(。 您必须在所有列上设置特定的宽度。 我认为最好的方法是为每个标题提供一个类，并确保内部表中的相应列具有相同的类。

<table>
    <tr><th>...</th></tr>
    <tr><td>
            <div><inner table></div>
    </td></tr>
</table>

查看以下示例：http://www.cssplay.co.uk/menu/tablescroll.html

非常快速和粗略，但希望你明白了，为什么不直接使用 position:fixed 作为头。JSFIDDLE： http://jsfiddle.net/b3S5F/