Html 滚动时是否始终保持页眉元素在顶部？

我已经阅读了很多关于这个主题的文章，并尝试实现了一些，但我似乎无法正确地实现它。我有一个简单的HTML表，用于比较产品：

<table>
  <tr>
    <th>Product:</th>
    <th>Product 1</th>
    <th>Product 2</th>
    <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
    <td>Product 1 features</td>
    <td>Product 2 features</td>
    <td>Product 3 features</td>
   </tr>
   and so the list goes on...
 </table>

产品：
产品1
产品2
产品3
特征
产品1特点
产品2特点
产品3特点
所以这个名单还在继续。。。

我想要的是，标题行始终位于活动窗口的顶部，即向下滚动时的顶部行，因为我的行向下移动得很远。我希望标签中的产品名称始终可见，这样用户就可以始终将内容与最上面一行中的不同产品关联起来

---

提前谢谢你

I一种简单的技术是将标题行与实际数据分开放在一个单独的

表中。
此页眉表格的位置设置为固定，然后下表（保存结果）的页眉表格的页眉顶部设置了页眉表格的高度

这就产生了标题停留在原处和表格滚动的效果

这里有一个基本示例：

您还可以使用jQuery插件创建一个固定头。看一看这个非常简单的实现

编辑

正如Anders所提到的，如果你沿着我建议的路线走，你需要设置
th
和
td
元素的宽度。否则它们将不匹配，因为它们是单独的表。
您可以通过创建div并固定位置来实现这一点。或者也可以通过添加内联css来实现

<table style="position:fixed;">
  <tr>
     <th>Product:</th>
     <th>Product 1</th>
     <th>Product 2</th>
      <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
     <td>Product 1 features</td>
     <td>Product 2 features</td>
     <td>Product 3 features</td>
   </tr>
  </table>


产品：
产品1
产品2
产品3
特征
产品1特点
产品2特点
产品3特点
我使用JSFIDLE创建了一个示例，您可以使用它

唯一的缺点是，当您使用
position:fixed
时，需要指定列大小，因为您会丢失标题上的宽度

这是示例中的CSS，HTML与您提供的相同

thead {
    height: 1em;
}

thead tr {
    position: fixed;
    background-color: #FFF;
}

我遇到了行标题（小时）和列标题（天）的计划问题。
我想让双方都看得见。
应用程序在IFrame中显示内容，因此我在IFrame外部创建了一个水平DIV和一个垂直DIV，样式为“overflow:hidden”。
然后我将滚动与IFrame的“onscroll”事件同步

下面是我用滚动同步标题的代码：

window.onscroll = function () {

        try {
            // - Scroll days header (on the top) horizontally
            var offsetX = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
            var header1Div = window.parent.document.getElementById("EntetesColonnes");
            header1Div.scrollLeft = offsetX;

            // - Scroll hours header (on the left) vertically 
            var offsetY = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
            var header2Div = window.parent.document.getElementById("HeaderHoursLeft");
            header2Div.scrollTop = offsetY;
        }
        catch (ex) {
            alert("FrmPlanningChirurgien/window.onscroll: " + ex.message);
        }
    }

我的解决方案不是那么简单，因为我必须在“onresize”中设置水平DIV的宽度和垂直DIV的高度。
这会导致更复杂的情况，因为onResize每秒可能会触发很多次，而且在IE8中，当发生滚动时，甚至会触发此事件。
所以我做了一个setTimeout来防止标题被频繁重画：

var PREVIOUS_frameWidth = 0;
var PREVIOUS_frameHeight = 0;
var timerMakeHeaders = null;

window.onresize = function () {
    try {

        var frameWidth = CROSS.getWindowWidth();
        var frameHeight = CROSS.getWindowHeight();

        if (frameWidth != PREVIOUS_frameWidth || frameHeight != PREVIOUS_frameHeight) {

            // - *** Launch headers creation method
            // - If there is another query to redraw, the Timer is stopped and recreated.
            // - The headers are only redrawn when Timer fires.
            if (timerMakeHeaders != null) {
                window.clearTimeout(timerMakeHeaders);
                timerMakeHeaders = null;
            }
            timerMakeHeaders = window.setTimeout(makeHeaders, 50); 

            // - *** Store new values
            PREVIOUS_frameWidth = frameWidth;
            PREVIOUS_frameHeight = frameHeight;
        }
    } catch (e) { alert("Erreur window.onresize/FrmPlanningChirurgien.aspx : " + e.message); }
}

最后，
makeHeaders（）
方法必须调整div的大小：

function makeHeaders() {

    // (...)

    var frame = window.parent.document.getElementById("CalendarFrame"); 
    var iframeRect = frame.getBoundingClientRect(); 
    headerDiv.style.width = iframeRect.right - iframeRect.left - 20; // The 20 pixels are here for the vertical scrollbar width
    headerDiv.scrollLeft = frame.scrollLeft;

    // (...)


    var headerHourDiv = window.parent.document.getElementById("HeaderHoursLeft");
    var newHeight = iframeRect.bottom - iframeRect.top - 20 - 7; // The VISIBLE width for the DIV must be equal to IFRAME Width minus the scroll width or height
    headerHourDiv.style.height = newHeight; 
    headerHourDiv.scrollTop = frame.scrollTop;       


}
catch (e) {
    alert("makeHeaders: " + e.message);
}    }

也许可以不使用IFRAME，只使用3个div：每个头一个div，最后一个div用于内容。但机制必须是相同的，我认为：需要在滚动位置之间进行同步

致以最诚挚的问候，
可能的重复：@JúlioSantos:不，这个问题根本没有提到jQuery（甚至JavaScript）。哦，好的，我明白了。我将添加一个答案。如果th和td的宽度不同，这将不起作用，因为它们通常会这样做。但是，如果单元格（包括标题）具有固定且相等的大小，则此操作非常有效。（+1仍然是我认为最好的解决方案，也是很好的jquery技巧）@AndersHolmström是的，在这种情况下，您需要设置
th
和
td
的宽度。我觉得最好的解决方案是使用jquery插件，它可以从表中构建标题表，这样宽度就正确了。回答得好，谢谢，它工作得很好。但是，当在小屏幕（移动屏幕）上查看时，您必须水平滚动。现在出现了一个问题，因为当您水平滚动时，固定标题也会水平滚动（因为它是固定的，并且部分不在窗口中）。我怎样才能只在垂直方向上修复它呢？对于移动屏幕，我会尝试摆脱水平滚动。研究响应式CSS。这并不能满足问题的要求。它只是将整个表格固定在页面上的一个位置。