我怎样才能让表格的主体滚动但将其头部固定在原位？

Posted 2023-03-05

技术标签:

【中文标题】我怎样才能让表格的主体滚动但将其头部固定在原位？【英文标题】：How can I let a table's body scroll but keep its head fixed in place? 【发布时间】：2010-09-12 22:24:44 【问题描述】：

我正在编写一个需要 html 表格来保持设定大小的页面。我需要表格顶部的标题始终保持在那里，但无论向表格中添加多少行，我还需要表格的主体滚动。想想一个迷你版的excel。这似乎是一项简单的任务，但我在网上找到的几乎所有解决方案都有一些缺点。我该如何解决这个问题？

【问题讨论】：

那里有很多例子。 this one is one of them. 我需要针对 IE6、IE7、FF，...但不幸的是，尤其是 IE 里面有很多 CSS hack。在 IE7 中工作应该是微不足道的。我对所有浏览器的答案都感兴趣！ "在 IE7 中工作应该很简单。"吉姆，是你吗？你是我的项目经理吗？ :) 【参考方案1】：

您是否尝试过使用 thead 和 tbody，并使用 overflow:scroll 在 tbody 上设置固定高度？

你的目标浏览器是什么？

编辑：它在 Firefox 中（几乎）运行良好 - 添加垂直滚动条也导致需要水平滚动条 - 呸。 IE 只是将每个 td 的高度设置为我指定的 tbody 高度。这是我能想到的最好的：

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table  width:300px; 
    tbody  height:10em;  overflow:scroll;
    td  height:auto; 
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>

【讨论】：

我需要针对 IE6、IE7、FF 等，但不幸的是，尤其是 IE 更改表格，使其宽度小于 100%，比如 99%，它应该会解决问题 overflow-x: hidden; 和 overflow-y: auto 也有帮助。这曾经在firefox中工作过，它是显而易见的和非cludgy的代码。但是，在最新版本的 Firefox 中，它已损坏。这不起作用，因为“溢出”仅适用于“块容器”（w3.org/TR/CSS21/visufx.html#overflow），而表格框不是“块容器”（w3.org/TR/CSS21/visuren.html#block-boxes）。【参考方案2】：

这让我非常头疼，试图为我们的应用程序实现这样的网格。我尝试了所有各种技术，但它们都有问题。我最接近的是使用 jQuery 插件，例如 Flexigrid（请查看 http://www.ajaxrain.com 以获取替代方案），但这似乎不支持我需要的 100% 宽表。

我最终做的是自己动手； Firefox 支持滚动 tbody 元素，所以我浏览器嗅探并使用适当的 CSS（设置高度、溢出等...询问您是否需要更多详细信息）进行滚动，然后对于其他浏览器，我使用了两个单独的表设置使用 @ 987654324@，它使用一种大小算法，保证不会超出规定的大小（当内容太宽而无法容纳时，普通表格会扩展）。通过给两个表相同的宽度，我能够让它们的列对齐。我将第二个包裹在一个 div 集中以滚动，并用一些带有边距等的古怪扑克设法获得了我想要的外观和感觉。

对不起，如果这个答案在某些地方听起来有点含糊；我写得很快，因为我没有太多时间。如果您希望我进一步扩展，请发表评论！

【讨论】：

很抱歉复活这个旧线程，但我真的需要知道你是如何解决这个问题的。我让 FF 工作，但不是 IE/WebKit 浏览器。请尽可能提供帮助。【参考方案3】：

我必须找到相同的答案。我发现的最好的例子是http://www.cssplay.co.uk/menu/tablescroll.html - 我发现例子#2 对我很有效。您必须使用 Java Script 设置内表的高度，其余的是 CSS。

【讨论】：

不幸的是，当您有一个宽表（水平滚动）时，此方法会失败。您将有两个水平滚动条；一个用于标题，一个用于数据。如果您没有在中指定宽度，您的解决方案将不起作用为了遵守（相对）新的 Stack Overflow 标准，您能否编辑此答案以包含链接中的相关位？比利，源头在哪里？如果不使用 javascript 或预定义值，就不可能在标题和（可滚动）表体之间同步列宽。 【参考方案4】：

不确定是否有人仍在查看此内容，但我之前这样做的方式是使用两个表格来显示单个原始表格 - 第一个只是原始表格标题行，没有表格正文行（或空正文行使其生效）。

第二个在单独的 div 中，没有标题，只有原始表体行。然后使单独的 div 可滚动。

它的 div 中的第二个表格位于 HTML 中第一个表格的正下方，它看起来像一个带有固定标题和可滚动下部的单个表格。我只在 Safari、Firefox 和 IE（2010 年春季的最新版本）中对此进行了测试，但它在所有这些中都有效。

唯一的问题是第一个表在没有正文的情况下无法验证（W3.org 验证器 - XHTML 1.0 严格），当我添加一个没有内容的表时，它会导致空白行。您可以使用 CSS 使其不可见，但它仍会占用页面空间。

【讨论】：

额外的行如何仍然占用空间？如果您使用display: none;，它不必占用任何屏幕空间，除非您的意思是源中的空间..？【参考方案5】：

这是一个真正适用于 IE 和 FF 的代码（至少）：

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table
            width: 400px;
        
        tbody 
            height: 100px;
            overflow: scroll;
        
        div 
            height: 100px;
            width: 400px;
            position: relative;
        
        tr.alt td 
            background-color: #EEEEEE;
        
    </style>
    <!--[if IE]>
        <style type="text/css">
            div 
                overflow-y: scroll;
                overflow-x: hidden;
            
            thead tr 
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            
            tbody 
                height: auto;
            
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

我已经更改了原始代码以使其更清晰，并使其在 IE 和 FF 中都能正常工作..

原码HERE

【讨论】：

在 IE7/8 中，这仅适用于 Quirks 模式，并且在您添加 doctype 后立即停止工作，即 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 【参考方案6】：

这是我的选择。它还为页眉、正文和页脚使用不同的 DIV，但在调整窗口大小以及搜索、滚动、排序、过滤和定位时同步：

My CD lists

单击爵士乐、古典乐...按钮查看表格。即使关闭了 JavaScript，它的设置也足够了。

在 IE、FF 和 WebKit（Chrome、Safari）上似乎没问题。

【讨论】：

【参考方案7】：

如果可以在这里使用 JavaScript 是我的解决方案在所有列（像素！）上创建一个设置固定宽度的表格，将类 Scrollify 添加到表格中，并在 css 或样式中添加这个 javascript + jquery 1.4.x 设置高度！

测试于：Opera、Chrome、Safari、FF、IE5.5(Epic 脚本失败)、IE6、IE7、IE8、IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () 
    $("table.Scrollify").each(function (index, element) 
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    );
);


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() 
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);

编辑：固定高度。

【讨论】：

【参考方案8】：

我发现DataTables 非常灵活。虽然它的默认版本基于 jquery，但也有一个AngularJs plugin。

【讨论】：

非常漂亮 - 大多数功能都适用于我的 S3、android 4.0.4，但不是搜索/过滤器【参考方案9】：

编辑： 这是一个非常古老的答案，只是为了表明它在 2000 年代曾受到支持，但由于 2010 年代的浏览器策略是尊重 W3C 规范而放弃，即使删除了一些功能：在 HTML5 之前笨拙地指定了带有固定页眉/页脚的可滚动表格。

坏消息

不幸的是，没有优雅的方法来处理固定thead/tfoot 的可滚动表因为HTML/CSS specifications are not very clear about that feature。

说明

虽然HTML 4.01 Specification 说thead/tfoot/tbody 用于（引入？）滚动表体：

可以使用 THEAD、TFOOT 和 TBODY 元素 [...] 对表格行进行分组 [...]。这种划分使用户代理能够支持独立于表头和表脚滚动表体。

但 FF 3.6 上的工作可滚动表格功能已在 FF 3.7 中删除，因为不符合 HTML/CSS 规范被认为是一个错误。有关 FF 错误，请参阅 this 和 that cmets。

Mozilla 开发者网络提示

以下是MDN 滚动表格有用提示的简化版本see this archived page 或current French version

<style type="text/css">
table 
  border-spacing: 0;              /* workaround */

tbody 
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */

td 
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */

</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

但是 MDN 也说 this does not work any more on FF :-( 我还在 IE8 上测试过 => 表也不能滚动:-((

【讨论】：

MDN 可滚动表格链接的提示与边框折叠无关。可能因为 5 年过去了，页面发生了变化感谢@partizanos 我终于在 MDN 历史上找到了原始的 wiki 页面！我的旧答案现在似乎已经过时了，但为了繁荣，下一代开发人员会知道在 2000 年代实现它是可能且容易实现的 ;-) 干杯【参考方案10】：

抱歉，我还没有阅读对您问题的所有回复。

是的，你想要的东西在这里（我已经做了）

您可以使用两个具有相同类名的表格来实现相似的样式，一个只带有表头，另一个带有您的行。现在将此表放在一个具有固定高度的 div 中，使用 overflow-y:auto OR scroll。

【讨论】：

【参考方案11】：

我看到了 Sean Haddy 的 excellent solution to a similar question，冒昧的 making some edits：

使用类而不是 ID，因此一个 jQuery 脚本可以重复用于一页上有多个表格增加了对语义 HTML 表格元素的支持，例如标题、thead、tfoot 和 tbody 将滚动条设为可选，这样它就不会出现在比可滚动高度“短”的表格中调整了滚动 div 的宽度，使滚动条上升到表格的右边缘使概念易于访问在注入的静态表头上使用 aria-hidden="true" 并保留原来的thead，只是用jQuery隐藏并设置aria-hidden="false" 显示了多个不同大小的表格的示例

不过，肖恩完成了繁重的工作。也感谢 Matt Burland 指出需要支持 tfoot。

请在http://jsfiddle.net/jhfrench/eNP2N/亲自查看

【讨论】：

很好，但是如果你想要一个页眉和一个页脚，那就搞砸了！谢谢马特，我做了调整。如果显示 td 和 th 边界，对齐需要调整。【参考方案12】：

我对上述建议的主要问题是能够插入 tablesorter.js 并且能够浮动限制为特定最大大小的表的标题。我最终偶然发现了插件jQuery.floatThead，它提供了浮动标题并允许排序继续工作。

它还有一个很好的比较页面，显示自己与similar plugins。

【讨论】：

【参考方案13】：

我使用 javascript（无库）和 CSS 执行此操作 - 表格主体 随页面滚动， 表格不必固定宽度或高度，尽管每列必须有一个宽度. 您还可以保留排序功能。

基本上：

在 HTML 中，创建容器 div 来定位表格标题行和表体，还创建一个“掩码” div 来隐藏表体滚动过标题

在 CSS 中，将表格部分转换为块

在 Javascript 中，获取表格宽度并匹配掩码的宽度...获取页面内容的高度...测量滚动位置... 操作 CSS 设置表头行位置和掩码身高

这是 javascript 和 jsFiddle DEMO.

// get table width and match the mask width

function setMaskWidth()  
  if (document.getElementById('mask') !==null) 
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   


function fixTop() 

  // get height of page content 
  function getScrollY() 
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) 
        y = window.pageYOffset;
       else if ( document.body && ( document.body.scrollTop) ) 
        y = document.body.scrollTop;
       else if ( document.documentElement && ( document.documentElement.scrollTop) ) 
        y = document.documentElement.scrollTop;
      
      return [y];
    

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) 
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) 
        document.styleSheets[1].rules[0].style.top = y + "px" ;
       else 
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      
  



window.onscroll = function() 
  setMaskWidth();
  fixTop();

【讨论】：

但在您的演示中，表头并没有保持原样，它只是滚动。（这里是铬。）我在 Chrome 中没有看到。您确定您没有将带有红色说明的黄色突出显示单元格误认为标题吗？标题单元格位于顶部，灰底灰（“Col 1”、“Col 2”等）。【参考方案14】：

你需要的是：

1) 有一个高度有限的表格体，因为只有在内容大于滚动窗口时才会发生滚动。但是 tbody 无法调整大小，您必须将其显示为 block 才能这样做：

tbody 
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example

2) 重新同步表头和表体列的宽度，因为使后者成为block 使其成为不相关的元素。这样做的唯一方法是通过对两者强制使用相同的列宽来模拟同步。

但是，由于tbody 本身现在是block，它的行为不再像table。由于您仍然需要 table 行为来正确显示您的列，因此解决方案是要求您的每一行显示为单独的 tables：

thead          
   display: table;  
   width: 100%;     // Fill the containing table

tbody tr 
   display: table;
   width: 100%;     // Fill the containing table

（请注意，使用此技术，您将无法再跨行）。

完成后，您可以强制列宽在thead 和tbody 中具有相同的宽度。你不能这样：

为每一列单独处理（通过特定的 CSS 类或内联样式），这对于每个表实例来说是相当乏味的；统一用于所有列（例如，如果您有 5 列，则通过 th, td width: 20%; ），这更实用（无需为每个表实例设置宽度）但不适用于任何列数通过固定的表格布局统一用于任何列数。

我更喜欢最后一个选项，它需要添加：

thead 
   table-layout: fixed;   // Same layout for all cells

tbody tr 
   table-layout: fixed;   // Same layout for all cells

th, td 
   width: auto;   // Same width for all cells, if table has fixed layout

查看here 的演示，来自this question 的答案。

【讨论】：

感谢您的解释。令人着迷的是有多少种方法可以完成这样的事情，而大多数答案只是提供了一些代码和 plunkr 链接，让您自己弄清楚。【参考方案15】：

此解决方案适用于 Chrome 35、Firefox 30 和 IE 11（未测试其他版本）

它的纯 CSS： http://jsfiddle.net/ffabreti/d4sope1u/

一切都设置为显示：块，表格需要一个高度：

    table 
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    
    thead > tr  
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    
    tbody > tr:nth-of-type(1) 
        margin-top: 16px;
    
    tbody tr 
        display: block;
    

    td, th 
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;

【讨论】：

【参考方案16】：

直播JsFiddle

只有 HTML 和 CSS 是可能的

table.scrollTable 
  border: 1px solid #963;
  width: 718px;


thead.fixedHeader 
  display: block;


thead.fixedHeader tr 
  height: 30px;
  background: #c96;


thead.fixedHeader tr th 
  border-right: 1px solid black;


tbody.scrollContent 
  display: block;
  height: 262px;
  overflow: auto;


tbody.scrollContent td 
  background: #eee;
  border-right: 1px solid black;
  height: 25px;


tbody.scrollContent tr.alternateRow td 
  background: #fff;


thead.fixedHeader th 
  width: 233px;


thead.fixedHeader th:last-child 
  width: 251px;


tbody.scrollContent td 
  width: 233px;

<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</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>

【讨论】：

【参考方案17】：

对我来说，在我从表格 CSS 中删除宽度之前，与滚动相关的任何东西都没有真正起作用。最初，表格 CSS 是这样的：

.table-fill 
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;

我一删除宽度：100%;所有滚动功能开始工作。

【讨论】：

【参考方案18】：

如果您的标准足够低 ;) 您可以将仅包含标题的表格直接放在只有正文的表格上方。它不会水平滚动，但如果你不需要...

【讨论】：

以上是关于我怎样才能让表格的主体滚动但将其头部固定在原位？的主要内容，如果未能解决你的问题，请参考以下文章

具有固定头部的滚动表中的粘性子标题

修复表格标题并使表格主体在 React 中滚动

如何在不滚动iframe的情况下显示网页的“头部”？

WORD文档怎么能每页套用一个固定表格当框

使用 Reactstrap 响应式表的带有固定标题的可滚动表

想做一个页面头部div固定不动的效果