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

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

我在网上尝试了许多脚本，试图使其正常运行。我想在浏览器上保持这种简单易用，因为某些目标计算机相当la脚。

这是我正在使用的:

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

最佳答案

您可以在两个表中使用相同的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>

参见DEMO

编辑-2012年8月3日

我能够使其正常工作的唯一方法是使用一些技巧。
与第一个示例一样，我分离了标题。但是由于在标题中极端定制了多个不同的宽度，因此使所有内容保持一致的最可靠方法是将th行和复制到第二个表中，但内部没有文本。这使它们“不可见”，但迫使第二张表中的列按预期对齐。

参见DEMO

感觉有点骇人听闻，我敢肯定有一个适当的解决方案，但在此期间看来效果很好。

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

当然，这是一种更优雅的方法，但是我能够使表更具动态性。

宽度问题不大，因为我将总宽度的上限设置为大约95％，并将表的表头硬编码为min-width: 600px;，对主体的表为min-width: 584px，从而确保了表始终保持对齐。

对于动态高度，我使用jQuery，将调整大小功能绑定(bind)到Windows调整大小事件:

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

当您打开 fiddle 时， fiddle 窗口的原始高度很可能会很高以查看动态。只需移动分隔线并缩小 View 即可查看正在调整的大小。

当您不显示网格时，而不是会忘记取消绑定(bind)该事件，因为它仍然会在每次调整大小时执行。

参见dynamic-grid DEMO

您会发现有些样式位于 fiddle 的css(右上 Angular )中，而另一些则没有。我的CSS并不是很坚固，当我将它们从元素移到CSS区域时，某些样式开始被忽略。我尽我所能将其移入CSS，其余部分则进行了硬编码，以免破坏它。我敢肯定，每天使用CSS的人都可以为您解决这些问题。

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

摘要
我敢肯定，有一种方法可以更优雅地实现您想要的功能，可能有些脚本向导为此提供了一个插件。在此之前，这似乎是可行的。还可能发生的是，如果在列中输入了很多长数据，则列会再次开始失准接近600像素，但是如上所述，这是一种非常个性化的解决方案，您可能需要为某些宽度添加一些动态计算随着时间的推移使用jQuery。

编辑-2012年8月9日

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

参见DEMO

我使用了评论中提到的逻辑。您可能会发现更好的命名约定。我只使用了主列+每个子列的开/关开关。对于第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(50像素)和3(75像素)的宽度。这总计为125像素。

我希望这是有道理的，但如果不是这样，我很乐意继续聊天，并与您一起进行测量(如果您想应用)。

到目前为止，我可以看到尺寸为:

Col01

Col1 =超过175像素的colspan 3

3个子列分解为175px，如下所示:50px-50px-75px

Col02

Col2 =超过100像素的colspan 3

3个子列分解为100px，如下所示:40px-30px-30px

Col03

Col3 =超过100像素的colspan

没有子列

Col04

Col4 =超过150像素的colspan 5

5个子列分割为150px，如下所示:30px-30px-30px-30px-30px-30px

Col05

Col5 =超过100像素的colspan

没有子列

关于javascript - 如何创建包含colspans的固定表标题行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11798327/

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

上一篇：css - 如何删除所有默认的 Webkit 搜索字段样式？

下一篇：css - 如何使元素符号列表与 css 中的文本对齐？