blocks|key|3210556|text|您可以这样做，方法是点击window上的scroll事件处理程序，并使用另一个具有固定位置的table在页面顶部显示页眉。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3210557|HTML：|3210558|<table+id="header-fixed"></table>|code-block|syntax|javascript|3210559|CSS:|BOLD|3210560|#header-fixed+{
++++position:+fixed;
++++top:+0px;+display:none;
++++background-color:white;
}|3210561|JavaScript:|3210562|var+tableOffset+=+$("#table-1").offset().top;
var+$header+=+$("#table-1+>+thead").clone();
var+$fixedHeader+=+$("#header-fixed").append($header);

$(window).bind("scroll",+function()+{
++++var+offset+=+$(this).scrollTop();

++++if+(offset+>=+tableOffset+&&+$fixedHeader.is(":hidden"))+{
++++++++$fixedHeader.show();
++++}
++++else+if+(offset+<+tableOffset)+{
++++++++$fixedHeader.hide();
++++}
});|3210563|当用户向下滚动到足以隐藏原始表头时，这将显示表头。当用户再次将页面向上滚动到足够远时，它将再次隐藏。|3210564|工作示例：http://jsfiddle.net/andrewwhitaker/fj8wM/|3210565|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/andrewwhitaker/fj8wM/^0|C|6|K|6|1A|5|0|0|0|0|4|0|0|0|B|0|0|0|5|15|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@$9|1H|A|1I|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|R|3|S|5|6|7|1K|8|@$9|1L|A|1M|B|O]]|D|@]|E|$]]|$1|T|3|U|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|V|3|W|5|6|7|1O|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|Z|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

<p>You would do something like this by tapping into the <code>scroll</code> event handler on <code>window</code>, and using another <code>table</code> with a fixed position to show the header at the top of the page.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;table id="header-fixed"&gt;&lt;/table&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 &gt; thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset &gt;= tableOffset &amp;&amp; $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset &lt; tableOffset) {
        $fixedHeader.hide();
    }
});
</code></pre>

<p>This will show the table head when the user scrolls down far enough to hide the original table head.  It will hide again when the user has scrolled the page up far enough again.</p>

<p>Working example: <a href="http://jsfiddle.net/andrewwhitaker/fj8wM/" rel="noreferrer">http://jsfiddle.net/andrewwhitaker/fj8wM/</a></p>


blocks|key|285256|text|嗯，我试图获得相同的效果，而不是求助于固定大小的列或整个表的固定高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285257|我想出的解决方案是一个黑客。它包括复制整个表，然后隐藏除标题之外的所有内容，并使其具有固定的位置。|285258|HTML|285259|<div+id="table-container">
<table+id="maintable">
++++<thead>
++++++++<tr>
++++++++++++<th>Col1</th>
++++++++++++<th>Col2</th>
++++++++++++<th>Col3</th>
++++++++</tr>
++++</thead>
++++<tbody>
++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>some+really+long+line+here+instead</td>
++++++++++++<td>info</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++</tr>
++++++++++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++</tr>
++++++++++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++++++<td>info</td>
++++++++</tr>
++++</tbody>
</table>
<div+id="bottom_anchor"></div>
</div>|code-block|syntax|javascript|285260|CSS|285261|body+{+height:+1000px;+}
thead{
++++background-color:white;
}|285262|285263|function+moveScroll(){
++++var+scroll+=+$(window).scrollTop();
++++var+anchor_top+=+$("#maintable").offset().top;
++++var+anchor_bottom+=+$("#bottom_anchor").offset().top;
++++if+(scroll>anchor_top+&&+scroll<anchor_bottom)+{
++++clone_table+=+$("#clone");
++++if(clone_table.length+==+0){
++++++++clone_table+=+$("#maintable").clone();
++++++++clone_table.attr('id',+'clone');
++++++++clone_table.css({position:'fixed',
+++++++++++++++++'pointer-events':+'none',
+++++++++++++++++top:0});
++++++++clone_table.width($("#maintable").width());
++++++++$("#table-container").append(clone_table);
++++++++$("#clone").css({visibility:'hidden'});
++++++++$("#clone+thead").css({'visibility':'visible','pointer-events':'auto'});
++++}
++++}+else+{
++++$("#clone").remove();
++++}
}
$(window).scroll(moveScroll);+|285264|查看此处：http://jsfiddle.net/QHQGF/7/|offset|length|285265|编辑:更新了代码，以便标题可以接收指针事件(因此标题中的按钮和链接仍然有效)。这解决了luhfluh和Joe+M。|285266|新的jsfiddle在这里：http://jsfiddle.net/cjKEx/|285267|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QHQGF/7/|1|http://jsfiddle.net/cjKEx/^0|0|0|0|0|0|0|0|0|5|S|0|0|0|E|Q|1|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1C|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1E|8|@]|9|@]|A|$I|J]]|$1|O|3|J|5|6|7|1F|8|@]|9|@]|A|$]]|$1|P|3|Q|5|H|7|1G|8|@]|9|@]|A|$I|J]]|$1|R|3|S|5|6|7|1H|8|@]|9|@$T|1I|U|1J|1|1K]]|A|$]]|$1|V|3|W|5|6|7|1L|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1M|8|@]|9|@$T|1N|U|1O|1|1P]]|A|$]]|$1|Z|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]|17|$5|12|13|14|A|$15|18]]]]

<p>Well, I was trying to obtain the same effect without resorting to fixed size columns or having a fixed height for the entire table.</p>

<p>The solution I came up with is a hack. It consists of duplicating the entire table then hiding everything but the header, and making that have a fixed position.</p>

<h3>HTML</h3>

<pre><code>&lt;div id="table-container"&gt;
&lt;table id="maintable"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Col1&lt;/th&gt;
            &lt;th&gt;Col2&lt;/th&gt;
            &lt;th&gt;Col3&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;some really long line here instead&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
                &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
                &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
            &lt;td&gt;info&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;div id="bottom_anchor"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h3>CSS</h3>

<pre><code>body { height: 1000px; }
thead{
    background-color:white;
}
</code></pre>

<h3>javascript</h3>

<pre><code>function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll&gt;anchor_top &amp;&amp; scroll&lt;anchor_bottom) {
    clone_table = $("#clone");
    if(clone_table.length == 0){
        clone_table = $("#maintable").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed',
                 'pointer-events': 'none',
                 top:0});
        clone_table.width($("#maintable").width());
        $("#table-container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
    }
    } else {
    $("#clone").remove();
    }
}
$(window).scroll(moveScroll); 
</code></pre>

<p>See here: <a href="http://jsfiddle.net/QHQGF/7/" rel="noreferrer">http://jsfiddle.net/QHQGF/7/</a></p>

<p>Edit: updated the code so that the thead can receive pointer events(so buttons and links in the header still work). This fixes the problem reported by luhfluh and Joe M.</p>

<p>New jsfiddle here: <a href="http://jsfiddle.net/cjKEx/" rel="noreferrer">http://jsfiddle.net/cjKEx/</a></p>


blocks|key|287654|text|我解决了改变列宽的问题。我从上面Andrew的解决方案开始(非常感谢！)然后添加一个小循环来设置克隆td的宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287655|$("#header-fixed+td").each(function(index){
++++var+index2+=+index;
++++$(this).width(function(index2){
++++++++return+$("#table-1+td").eq(index).width();
++++});
});|code-block|syntax|javascript|287656|这解决了这个问题，而不必克隆整个表并隐藏正文。我是一个全新的JavaScript和jQuery+(和堆栈溢出)的新手，所以任何评论都是非常感谢的。|287657|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I was able to fix the problem with changing column widths.  I started with Andrew's solution above (thanks so much!) and then added one little loop to set the widths of the cloned td's:</p>

<pre><code>$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});
</code></pre>

<p>This solves the problem without having to clone the entire table and hide the body.  I'm brand new to JavaScript and jQuery (and to stack overflow), so any comments are appreciated.</p>


blocks|key|281972|text|我也遇到了同样的问题，边框格式化不是使用熵的代码显示的，但有一些小的修复，现在表是可扩展的，并显示了您可能添加的所有css样式规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|281973|添加到css：|281974|#maintable{width:+100%25}++++|code-block|syntax|javascript|281975|下面是新的javascript：|281976|++++function+moveScroll(){
++++var+scroll+=+$(window).scrollTop();
++++var+anchor_top+=+$("#maintable").offset().top;
++++var+anchor_bottom+=+$("#bottom_anchor").offset().top;
++++if+(scroll+>+anchor_top+&&+scroll+<+anchor_bottom)+{
++++++++clone_table+=+$("#clone");
++++++++if(clone_table.length+===+0)+{++++++++++
++++++++++++clone_table+=+$("#maintable").clone();
++++++++++++clone_table.attr({id:+"clone"})
++++++++++++.css({
++++++++++++++++position:+"fixed",
++++++++++++++++"pointer-events":+"none",
+++++++++++++++++top:0
++++++++++++})
++++++++++++.width($("#maintable").width());

++++++++++++$("#table-container").append(clone_table);
++++++++++++//+dont+hide+the+whole+table+or+you+lose+border+style+&+
++++++++++++//+actively+match+the+inline+width+to+the+#maintable+width+if+the+
++++++++++++//+container+holding+the+table+(window,+iframe,+div)+changes+width++++++++++
++++++++++++$("#clone").width($("#maintable").width());
++++++++++++//+only+the+clone+thead+remains+visible
++++++++++++$("#clone+thead").css({
++++++++++++++++visibility:"visible"
++++++++++++});
++++++++++++//+clone+tbody+is+hidden
++++++++++++$("#clone+tbody").css({
++++++++++++++++visibility:"hidden"
++++++++++++});
++++++++++++//+add+support+for+a+tfoot+element
++++++++++++//+and+hide+its+cloned+version+too
++++++++++++var+footEl+=+$("#clone+tfoot");
++++++++++++if(footEl.length){
++++++++++++++++footEl.css({
++++++++++++++++++++visibility:"hidden"
++++++++++++++++});
++++++++++++}
++++++++}
++++}+
++++else+{
++++++++$("#clone").remove();
++++}
}
$(window).scroll(moveScroll);|281977|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I too experienced the same issues with the border formatting not being shown using entrophy's code but a few little fixes and now the table is expandable and displays all css styling rules you may add.</p>

<p>to css add:</p>

<pre><code>#maintable{width: 100%}    
</code></pre>

<p>then here is the new javascript:</p>

<pre><code>    function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll &gt; anchor_top &amp;&amp; scroll &lt; anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style &amp; 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);
</code></pre>


blocks|key|2997541|text|这将帮助你有一个固定的标题，它也可以与数据水平滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2997542|<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+HTML+4.01+Transitional//EN"+"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta+http-equiv="Content-Type"+content="text/html;+charset=ISO-8859-1">
<title>Shubh</title>



<script+type="text/javascript">
++++var+lastSeen+=+[+0,+0+];
++++function+checkScroll(div1,+div2)+{
++++++++if+(!div1+%7C%7C+!div2)
++++++++++++return;
++++++++var+control+=+null;
++++++++if+(div1.scrollLeft+!=+lastSeen[0])
++++++++++++control+=+div1;
++++++++else+if+(div2.scrollLeft+!=+lastSeen[1])
++++++++++++control+=+div2;
++++++++if+(control+==+null)
++++++++++++return;
++++++++else
++++++++++++div1.scrollLeft+=+div2.scrollLeft+=+control.scrollLeft;
++++++++lastSeen[0]+=+div1.scrollLeft;
++++++++lastSeen[1]+=+div2.scrollLeft;
++++}

++++window
++++++++++++.setInterval(
++++++++++++++++++++"checkScroll(document.getElementById('innertablediv'),+document.getElementById('headertable'))",
++++++++++++++++++++1);
</script>

<style+type="text/css">
#full+{
++++width:+400px;
++++height:+300px;
}

#innertablediv+{
++++height:+200px;
++++overflow:+auto;
}

#headertable+{
++++overflow:+hidden;
}
</style>
</head>
<body>

++++<div+id="full">




++++++++<div+id="headertable">
++++++++++++<table+border="1"+bgcolor="grey"+width="150px"+id="headertable">
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>

++++++++++++++++++++<td>&nbsp;&nbsp;&nbsp;</td>
++++++++++++++++</tr>

++++++++++++</table>
++++++++</div>




++++++++<div+id="innertablediv">

++++++++++++<table+border="1"+id="innertableid">
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++++++<td>shubh,+ansh</td>
++++++++++++++++</tr>

++++++++++++</table>
++++++++</div>
++++</div>
</body>
</html>|code-block|syntax|javascript|2997543|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This will help you to have a fixed header which can also be scrolled horizontally with data.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;title&gt;Shubh&lt;/title&gt;



&lt;script type="text/javascript"&gt;
    var lastSeen = [ 0, 0 ];
    function checkScroll(div1, div2) {
        if (!div1 || !div2)
            return;
        var control = null;
        if (div1.scrollLeft != lastSeen[0])
            control = div1;
        else if (div2.scrollLeft != lastSeen[1])
            control = div2;
        if (control == null)
            return;
        else
            div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
        lastSeen[0] = div1.scrollLeft;
        lastSeen[1] = div2.scrollLeft;
    }

    window
            .setInterval(
                    "checkScroll(document.getElementById('innertablediv'), document.getElementById('headertable'))",
                    1);
&lt;/script&gt;

&lt;style type="text/css"&gt;
#full {
    width: 400px;
    height: 300px;
}

#innertablediv {
    height: 200px;
    overflow: auto;
}

#headertable {
    overflow: hidden;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="full"&gt;




        &lt;div id="headertable"&gt;
            &lt;table border="1" bgcolor="grey" width="150px" id="headertable"&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;

                    &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;
        &lt;/div&gt;




        &lt;div id="innertablediv"&gt;

            &lt;table border="1" id="innertableid"&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                    &lt;td&gt;shubh, ansh&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|287705|text|我写了一个插件来做这件事。我已经研究它大约一年了，我认为它可以很好地处理所有的角落案例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287706|287707|在容器内滚动使用overflow+|unordered-list-item|287708|在窗口内滚动|287709|负责调整窗口|287710|将事件绑定到窗口时发生的情况重要的是，它不会强制您更改表的以使其正常工作<代码>H212<代码>F213|287711|287712|以下是一些演示/文档：|287713|http://mkoryak.github.io/floatThead/|offset|length|287714|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|E|7|14|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$Q|18|R|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|P]]]]

<p>I wrote a plugin that does this. Ive been working on it for about a year now and I think it handles all the corner cases pretty well:</p>

<ul>
<li>scrolling within a container with overflow </li>
<li>scrolling within a window</li>
<li>taking care of what happens when you resize the window</li>
<li>keeping your events bound to the header</li>
<li><strong>most importantly it doesn't force you to change your table's css</strong> to make it work</li>
</ul>

<p>Here are some demos/docs:<br>
<a href="http://mkoryak.github.io/floatThead/">http://mkoryak.github.io/floatThead/</a></p>


blocks|key|284266|text|最好的解决方案是使用这个jquery插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284267|https://github.com/jmosbech/StickyTableHeaders|offset|length|284268|这个插件对我们来说效果很好，我们尝试了很多其他的解决方案。我们在IE、Chrome和Firefox上进行了测试|284269|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>Best solution is to use this jquery plugin:</p>

<p><a href="https://github.com/jmosbech/StickyTableHeaders" rel="noreferrer">https://github.com/jmosbech/StickyTableHeaders</a></p>

<p>This plugin worked great for us and we tried a lot other solutions. We tested it in IE, Chrome and Firefox</p>


blocks|key|2997675|text|我发现了一个名为Sticky+Table+Headers的简单jQuery库。只有两行代码，它就完成了我想要的。上面的解决方案并不管理列的宽度，所以如果你的表格单元格占去了很多空间，那么最终得到的持久标题的大小将与你的表格的宽度不匹配。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2997676|http://plugins.jquery.com/StickyTableHeaders/|offset|length|2997677|使用信息在此处：https://github.com/jmosbech/StickyTableHeaders|2997678|entityMap|0|LINK|mutability|MUTABLE|url|1|https://github.com/jmosbech/StickyTableHeaders^0|0|0|19|0|0|8|1A|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|P]]]]

<p>I found a simple jQuery library called Sticky Table Headers.  Two lines of code and it did exactly what I wanted.  The solutions above don't manage the column widths, so if you have table cells that take up a lot of space, the resulting size of the persistent header will not match your table's width.</p>

<p><a href="http://plugins.jquery.com/StickyTableHeaders/" rel="noreferrer">http://plugins.jquery.com/StickyTableHeaders/</a></p>

<p>Usage info here:
<a href="https://github.com/jmosbech/StickyTableHeaders" rel="noreferrer">https://github.com/jmosbech/StickyTableHeaders</a></p>


blocks|key|3211049|text|到目前为止，这是我找到的最好的具有固定表头的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211050|更新5/11:修复了Kerry+Johnson指出的水平滚动错误|offset|length|3211051|Codepen：https://codepen.io/josephting/pen/demELL|3211052|​|3211053|;(function($)+{
+++$.fn.fixMe+=+function()+{
++++++return+this.each(function()+{
+++++++++var+$this+=+$(this),
++++++++++++$t_fixed;
+++++++++function+init()+{
++++++++++++$this.wrap('<div+class="container"+/>');
++++++++++++$t_fixed+=+$this.clone();
++++++++++++$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
++++++++++++resizeFixed();
+++++++++}
+++++++++function+resizeFixed()+{
+++++++++++$t_fixed.width($this.outerWidth());
++++++++++++$t_fixed.find("th").each(function(index)+{
+++++++++++++++$(this).css("width",$this.find("th").eq(index).outerWidth()%2B"px");
++++++++++++});
+++++++++}
+++++++++function+scrollFixed()+{
++++++++++++var+offsetY+=+$(this).scrollTop(),
++++++++++++offsetX+=+$(this).scrollLeft(),
++++++++++++tableOffsetTop+=+$this.offset().top,
++++++++++++tableOffsetBottom+=+tableOffsetTop+%2B+$this.height()+-+$this.find("thead").height(),
++++++++++++tableOffsetLeft+=+$this.offset().left;
++++++++++++if(offsetY+<+tableOffsetTop+%7C%7C+offsetY+>+tableOffsetBottom)
+++++++++++++++$t_fixed.hide();
++++++++++++else+if(offsetY+>=+tableOffsetTop+&&+offsetY+<=+tableOffsetBottom+&&+$t_fixed.is(":hidden"))
+++++++++++++++$t_fixed.show();
++++++++++++$t_fixed.css("left",+tableOffsetLeft+-+offsetX+%2B+"px");
+++++++++}
+++++++++$(window).resize(resizeFixed);
+++++++++$(window).scroll(scrollFixed);
+++++++++init();
++++++});
+++};
})(jQuery);

$(document).ready(function(){
+++$("table").fixMe();
+++$(".up").click(function()+{
++++++$('html,+body').animate({
++++++scrollTop:+0
+++},+2000);
+});
});|code-block|syntax|javascript|3211054|body{
++font:1.2em+normal+Arial,sans-serif;
++color:#34495E;
}

h1{
++text-align:center;
++text-transform:uppercase;
++letter-spacing:-2px;
++font-size:2.5em;
++margin:20px+0;
}

.container{
++width:90%25;
++margin:auto;
}

table{
++border-collapse:collapse;
++width:100%25;
}

.blue{
++border:2px+solid+#1ABC9C;
}

.blue+thead{
++background:#1ABC9C;
}

.purple{
++border:2px+solid+#9B59B6;
}

.purple+thead{
++background:#9B59B6;
}

thead{
++color:white;
}

th,td{
++text-align:center;
++padding:5px+0;
}

tbody+tr:nth-child(even){
++background:#ECF0F1;
}

tbody+tr:hover{
background:#BDC3C7;
++color:#FFFFFF;
}

.fixed{
++top:0;
++position:fixed;
++width:auto;
++display:none;
++border:none;
}

.scrollMore{
++margin-top:600px;
}

.up{
++cursor:pointer;
}|3211055|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>&darr;+SCROLL+&darr;</h1>
<table+class="blue">
++<thead>
++++<tr>
++++++<th>Colonne+1</th>
++++++<th>Colonne+2</th>
++++++<th>Colonne+3</th>
++++</tr>
++</thead>
++<tbody>
++++<tr>
++++++<td>Non</td>
++++++<td>MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
+++++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++</tbody>
</table>

<h1+class="scrollMore">&darr;+SCROLL+MORE+&darr;</h1>
<table+class="purple">
++<thead>
++++<tr>
++++++<th>Colonne+1</th>
++++++<th>Colonne+2</th>
++++++<th>Colonne+3</th>
++++</tr>
++</thead>
++<tbody>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
+++++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
+++++++<tr>
++++++<td>Non</td>
++++++<td>Mais</td>
++++++<td>Allo+!</td>
++++</tr>
++</tbody>
</table>
<h1+class="up+scrollMore">&uarr;+UP+&uarr;</h1>|3211056|3211057|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque/22996338?noredirect=1#comment87494121_22996338|1|https://codepen.io/josephting/pen/demELL^0|0|A|D|0|0|8|14|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|Q|3|R|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|S|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]|11|$5|W|X|Y|A|$Z|12]]]]

<p>This is by far the best solution I've found for having a fixed table header.</p>

<p>UPDATE 5/11: Fixed horizontal scrolling bug as pointed out by <a href="https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque/22996338?noredirect=1#comment87494121_22996338">Kerry Johnson</a></p>

<p>Codepen: <a href="https://codepen.io/josephting/pen/demELL" rel="nofollow noreferrer">https://codepen.io/josephting/pen/demELL</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('&lt;div class="container" /&gt;');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
           $t_fixed.width($this.outerWidth());
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offsetY = $(this).scrollTop(),
            offsetX = $(this).scrollLeft(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(),
            tableOffsetLeft = $this.offset().left;
            if(offsetY &lt; tableOffsetTop || offsetY &gt; tableOffsetBottom)
               $t_fixed.hide();
            else if(offsetY &gt;= tableOffsetTop &amp;&amp; offsetY &lt;= tableOffsetBottom &amp;&amp; $t_fixed.is(":hidden"))
               $t_fixed.show();
            $t_fixed.css("left", tableOffsetLeft - offsetX + "px");
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  font:1.2em normal Arial,sans-serif;
  color:#34495E;
}

h1{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-2px;
  font-size:2.5em;
  margin:20px 0;
}

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;h1&gt;&amp;darr; SCROLL &amp;darr;&lt;/h1&gt;
&lt;table class="blue"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Colonne 1&lt;/th&gt;
      &lt;th&gt;Colonne 2&lt;/th&gt;
      &lt;th&gt;Colonne 3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
       &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;h1 class="scrollMore"&gt;&amp;darr; SCROLL MORE &amp;darr;&lt;/h1&gt;
&lt;table class="purple"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Colonne 1&lt;/th&gt;
      &lt;th&gt;Colonne 2&lt;/th&gt;
      &lt;th&gt;Colonne 3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
       &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
       &lt;tr&gt;
      &lt;td&gt;Non&lt;/td&gt;
      &lt;td&gt;Mais&lt;/td&gt;
      &lt;td&gt;Allo !&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;h1 class="up scrollMore"&gt;&amp;uarr; UP &amp;uarr;&lt;/h1&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3211065|text|这是一个建立在公认答案之上的解决方案。它可以纠正:列宽，匹配的表格样式，以及在容器div中滚动表格的时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211066|使用|offset|length|style|BOLD|3211067|确保你的表格有一个<thead>标签，因为只有标题内容是固定的。|CODE|3211068|$("#header-fixed").fixHeader();|code-block|syntax|javascript|3211069|JavaSript|3211070|//Custom+JQuery+Plugin
(function+($)+{
++++$.fn.fixHeader+=+function+()+{
++++++++return+this.each(function+()+{
++++++++++++var+$table+=+$(this);
++++++++++++var+$sp+=+$table.scrollParent();
++++++++++++var+tableOffset+=+$table.position().top;
++++++++++++var+$tableFixed+=+$("<table+/>")
++++++++++++++++.prop('class',+$table.prop('class'))
++++++++++++++++.css({+position:+"fixed",+"table-layout":+"fixed",+display:+"none",+"margin-top":+"0px"+});
++++++++++++$table.before($tableFixed);
++++++++++++$tableFixed.append($table.find("thead").clone());

++++++++++++$sp.bind("scroll",+function+()+{
++++++++++++++++var+offset+=+$(this).scrollTop();

++++++++++++++++if+(offset+>+tableOffset+&&+$tableFixed.is(":hidden"))+{
++++++++++++++++++++$tableFixed.show();
++++++++++++++++++++var+p+=+$table.position();
++++++++++++++++++++var+offset+=+$sp.offset();

++++++++++++++++++++//Set+the+left+and+width+to+match+the+source+table+and+the+top+to+match+the+scroll+parent
++++++++++++++++++++$tableFixed.css({+left:+p.left+%2B+"px",+top:+(offset+?+offset.top+:+0)+%2B+"px",+}).width($table.width());

++++++++++++++++++++//Set+the+width+of+each+column+to+match+the+source+table
++++++++++++++++++++$.each($table.find('th,+td'),+function+(i,+th)+{
++++++++++++++++++++++++$($tableFixed.find('th,+td')[i]).width($(th).width());
++++++++++++++++++++});

++++++++++++++++}
++++++++++++++++else+if+(offset+<=+tableOffset+&&+!$tableFixed.is(":hidden"))+{
++++++++++++++++++++$tableFixed.hide();
++++++++++++++++}
++++++++++++});
++++++++});
++++};
})(jQuery);|3211071|entityMap^0|0|0|2|0|9|7|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@$D|10|E|11|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|12|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|R|3|S|5|M|7|16|8|@]|9|@]|A|$N|O]]|$1|T|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|U|$]]

<p>Here is a solution that builds upon the accepted answer.  It corrects for: column widths, matching table style, and when the table is scrolled in a container div.</p>

<p><strong>Usage</strong></p>

<p>Ensure your table has a <code>&lt;thead&gt;</code> tag because only thead content will be fixed.</p>

<pre><code>$("#header-fixed").fixHeader();
</code></pre>

<p><strong>JavaSript</strong></p>

<pre><code>//Custom JQuery Plugin
(function ($) {
    $.fn.fixHeader = function () {
        return this.each(function () {
            var $table = $(this);
            var $sp = $table.scrollParent();
            var tableOffset = $table.position().top;
            var $tableFixed = $("&lt;table /&gt;")
                .prop('class', $table.prop('class'))
                .css({ position: "fixed", "table-layout": "fixed", display: "none", "margin-top": "0px" });
            $table.before($tableFixed);
            $tableFixed.append($table.find("thead").clone());

            $sp.bind("scroll", function () {
                var offset = $(this).scrollTop();

                if (offset &gt; tableOffset &amp;&amp; $tableFixed.is(":hidden")) {
                    $tableFixed.show();
                    var p = $table.position();
                    var offset = $sp.offset();

                    //Set the left and width to match the source table and the top to match the scroll parent
                    $tableFixed.css({ left: p.left + "px", top: (offset ? offset.top : 0) + "px", }).width($table.width());

                    //Set the width of each column to match the source table
                    $.each($table.find('th, td'), function (i, th) {
                        $($tableFixed.find('th, td')[i]).width($(th).width());
                    });

                }
                else if (offset &lt;= tableOffset &amp;&amp; !$tableFixed.is(":hidden")) {
                    $tableFixed.hide();
                }
            });
        });
    };
})(jQuery);
</code></pre>


blocks|key|3211073|text|function+fix_table_header_position(){
+var+width_list+=+[];
+$("th").each(function(){
++++width_list.push($(this).width());
+});
+$("tr:first").css("position",+"absolute");
+$("tr:first").css("z-index",+"1000");
+$("th,+td").each(function(index){
++++$(this).width(width_list[index]);
+});

+$("tr:first").after("<tr+height="+%2B+$("tr:first").height()+%2B+"></tr>");}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3211074|这是我的解决方案|unstyled|3211075|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function fix_table_header_position(){
 var width_list = [];
 $("th").each(function(){
    width_list.push($(this).width());
 });
 $("tr:first").css("position", "absolute");
 $("tr:first").css("z-index", "1000");
 $("th, td").each(function(index){
    $(this).width(width_list[index]);
 });

 $("tr:first").after("&lt;tr height=" + $("tr:first").height() + "&gt;&lt;/tr&gt;");}
</code></pre>

<p>This is my solution</p>


blocks|key|3211085|text|在这个解决方案中，固定的标题是动态创建的，内容和样式是从标题中克隆出来的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211086|您所需要的只是两行代码：|3211087|var+$myfixedHeader+=+$("#Ttodo").FixedHeader();+//create+fixed+header+$(window).scroll($myfixedHeader.moveScroll);++++//bind+function+to+scroll+event|offset|length|style|CODE|3211088|我的jquery插件FixedHeader和getStyleObject在下面提供，您可以将它们放入文件.js|3211089|​|3211090|//+JAVASCRIPT



/*
+*+getStyleObject+Plugin+for+jQuery+JavaScript+Library
+*+From:+http://upshots.org/?p=112
+
Basic+usage:
$.fn.copyCSS+=+function(source){
++var+styles+=+$(source).getStyleObject();
++this.css(styles);
}
*/

(function($){
++++$.fn.getStyleObject+=+function(){
++++++++var+dom+=+this.get(0);
++++++++var+style;
++++++++var+returns+=+{};
++++++++if(window.getComputedStyle){
++++++++++++var+camelize+=+function(a,b){
++++++++++++++++return+b.toUpperCase();
++++++++++++};
++++++++++++style+=+window.getComputedStyle(dom,+null);
++++++++++++for(var+i+=+0,+l+=+style.length;+i+<+l;+i%2B%2B){
++++++++++++++++var+prop+=+style[i];
++++++++++++++++var+camel+=+prop.replace(/\-([a-z])/g,+camelize);
++++++++++++++++var+val+=+style.getPropertyValue(prop);
++++++++++++++++returns[camel]+=+val;
++++++++++++};
++++++++++++return+returns;
++++++++};
++++++++if(style+=+dom.currentStyle){
++++++++++++for(var+prop+in+style){
++++++++++++++++returns[prop]+=+style[prop];
++++++++++++};
++++++++++++return+returns;
++++++++};
++++++++return+this.css();
++++}
})(jQuery);



+++
//Floating+Header+of+long+table++PiotrC
(function+(+$+)+{
++++var+tableTop,tableBottom,ClnH;
++++$.fn.FixedHeader+=+function(){
++++++++tableTop=this.offset().top,
++++++++tableBottom=this.outerHeight()%2BtableTop;
++++++++//Add+Fixed+header
++++++++this.after('<table+id="fixH"></table>');
++++++++//Clone+Header
++++++++ClnH=$("#fixH").html(this.find("thead").clone());
++++++++//set+style
++++++++ClnH.css({'position':'fixed',+'top':'0',+'zIndex':'60',+'display':'none',
++++++++'border-collapse':+this.css('border-collapse'),
		'border-spacing':+this.css('border-spacing'),
++++++++'margin-left':+this.css('margin-left'),
++++++++'width':+this.css('width')++++++++++++
++++++++});
++++++++//rewrite+style+cell+of+header
++++++++$.each(this.find("thead>tr>th"),+function(ind,val){
++++++++++++$(ClnH.find('tr>th')[ind]).css($(val).getStyleObject());
++++++++});
++++return+ClnH;}
++++
++++$.fn.moveScroll=function(){
++++++++var+offset+=+$(window).scrollTop();
++++++++if+(offset+>+tableTop+&&+offset<tableBottom){
++++++++++++if(ClnH.is(":hidden"))ClnH.show();
++++++++++++$("#fixH").css('margin-left',"-"%2B$(window).scrollLeft()%2B"px");
++++++++}
++++++++else+if+(offset+<+tableTop+%7C%7C+offset>tableBottom){
++++++++++++if(!ClnH.is(':hidden'))ClnH.hide();
++++++++}
++++};
})(+jQuery+);





var+$myfixedHeader+=+$("#repTb").FixedHeader();
$(window).scroll($myfixedHeader.moveScroll);|code-block|syntax|javascript|3211091|/*+CSS+-+important+only+NOT+transparent+background+*/

#repTB{border-collapse:+separate;border-spacing:+0;}

#repTb+thead,#fixH+thead{background:+#e0e0e0+linear-gradient(#d8d8d8+0%25,+#e0e0e0+25%25,+#e0e0e0+75%25,+#d8d8d8+100%25)+repeat+scroll+0+0;border:1px+solid+#CCCCCC;}

#repTb+td{border:1px+solid+black}|3211092|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<h3>example</h3>+
<table+id="repTb">
<thead>
<tr><th>Col1</th><th>Column2</th><th>Description</th></tr>
</thead>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
</table>|3211093|3211094|entityMap^0|0|0|0|45|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@$F|12|G|13|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|16|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|17|8|@]|9|@]|A|$Q|R]]|$1|U|3|V|5|P|7|18|8|@]|9|@]|A|$Q|R]]|$1|W|3|M|5|6|7|19|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|Y|$]]

<p>In this  solution fixed header is created dynamically, 
the content and style is cloned from THEAD</p>

<p>all you need is two lines for example:</p>

<p><code>
var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header
$(window).scroll($myfixedHeader.moveScroll);    //bind function to scroll event
</code></p>

<p>My jquery plugin FixedHeader and 
getStyleObject provided below you can to put in the file .js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// JAVASCRIPT



/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 
Basic usage:
$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}
*/

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i &lt; l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);



   
//Floating Header of long table  PiotrC
(function ( $ ) {
    var tableTop,tableBottom,ClnH;
    $.fn.FixedHeader = function(){
        tableTop=this.offset().top,
        tableBottom=this.outerHeight()+tableTop;
        //Add Fixed header
        this.after('&lt;table id="fixH"&gt;&lt;/table&gt;');
        //Clone Header
        ClnH=$("#fixH").html(this.find("thead").clone());
        //set style
        ClnH.css({'position':'fixed', 'top':'0', 'zIndex':'60', 'display':'none',
        'border-collapse': this.css('border-collapse'),
		'border-spacing': this.css('border-spacing'),
        'margin-left': this.css('margin-left'),
        'width': this.css('width')            
        });
        //rewrite style cell of header
        $.each(this.find("thead&gt;tr&gt;th"), function(ind,val){
            $(ClnH.find('tr&gt;th')[ind]).css($(val).getStyleObject());
        });
    return ClnH;}
    
    $.fn.moveScroll=function(){
        var offset = $(window).scrollTop();
        if (offset &gt; tableTop &amp;&amp; offset&lt;tableBottom){
            if(ClnH.is(":hidden"))ClnH.show();
            $("#fixH").css('margin-left',"-"+$(window).scrollLeft()+"px");
        }
        else if (offset &lt; tableTop || offset&gt;tableBottom){
            if(!ClnH.is(':hidden'))ClnH.hide();
        }
    };
})( jQuery );





var $myfixedHeader = $("#repTb").FixedHeader();
$(window).scroll($myfixedHeader.moveScroll);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS - important only NOT transparent background */

#repTB{border-collapse: separate;border-spacing: 0;}

#repTb thead,#fixH thead{background: #e0e0e0 linear-gradient(#d8d8d8 0%, #e0e0e0 25%, #e0e0e0 75%, #d8d8d8 100%) repeat scroll 0 0;border:1px solid #CCCCCC;}

#repTb td{border:1px solid black}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;h3&gt;example&lt;/h3&gt; 
&lt;table id="repTb"&gt;
&lt;thead&gt;
&lt;tr&gt;&lt;th&gt;Col1&lt;/th&gt;&lt;th&gt;Column2&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;/tr&gt;
&lt;/thead&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;td&gt;info&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2997863|text|有点晚了，但这里有一个实现，它可以在同一页上处理多个表，并且"jank“free+(使用requestAnimationFrame)。此外，也不需要在列上提供任何宽度。水平滚动也适用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2997864|标头是在div中定义的，因此如果需要，您可以自由地在其中添加任何标记(如按钮)。这是所有需要的HTML：|offset|length|style|CODE|2997865|<div+class="tbl-resp">
++<table+id="tbl1"+class="tbl-resp__tbl">
+++++<thead>
++++++<tr>
++++++++<th>col+1</th>
++++++++<th>col+2</th>
++++++++<th>col+3</th>
++++++</tr>
++++</thead>+
++</table>
</div>|code-block|syntax|javascript|2997866|https://jsfiddle.net/lloydleo/bk5pt5gs/|2997867|entityMap|0|LINK|mutability|MUTABLE|url^0|0|4|3|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|N]]]]

<p>A bit late to the party, but here is an implementation that works with multiple tables on the same page and "jank" free (using requestAnimationFrame). Also there's no need to provide any width on the columns. Horizontal scrolling works as well.</p>

<p>The headers are defined in a <code>div</code> so you are free to add any markup there (like buttons), if required. This is all the HTML that is needed:</p>

<pre><code>&lt;div class="tbl-resp"&gt;
  &lt;table id="tbl1" class="tbl-resp__tbl"&gt;
     &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;col 1&lt;/th&gt;
        &lt;th&gt;col 2&lt;/th&gt;
        &lt;th&gt;col 3&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt; 
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/lloydleo/bk5pt5gs/" rel="nofollow">https://jsfiddle.net/lloydleo/bk5pt5gs/</a></p>


blocks|key|284398|text|纯CSS+(不支持IE11+)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284399|table+th+{
++++position:+-webkit-sticky;+//+this+is+for+all+Safari+(Desktop+&+iOS),+not+for+Chrome
++++position:+sticky;
++++top:+0;
++++z-index:+1;+//+any+positive+value,+layer+order+is+global
++++background:+#fff;+//+any+bg-color+to+overlap
}|code-block|syntax|javascript|284400|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Pure CSS (without IE11 support):</p>
<pre><code>table th {
    position: -webkit-sticky; // this is for all Safari (Desktop &amp; iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 1; // any positive value, layer order is global
    background: #fff; // any bg-color to overlap
}
</code></pre>


blocks|key|2997940|text|这可以通过使用样式属性转换来实现。您所要做的就是将表包装到某个具有固定高度和overflow设置为auto的div中，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2997941|.tableWrapper+{
++overflow:+auto;
++height:+calc(+100%25+-+10rem+);
}|code-block|syntax|javascript|2997942|然后，您可以将onscroll处理程序附加到它，在这里，您有一个方法，它可以查找用<div+class="tableWrapper"></div>包装的每个表|offset|length|style|CODE|2997943|++fixTables+()+{
++++document.querySelectorAll('.tableWrapper').forEach((tableWrapper)+=>+{
++++++tableWrapper.addEventListener('scroll',+()+=>+{
++++++++var+translate+=+'translate(0,'+%2B+tableWrapper.scrollTop+%2B+'px)'
++++++++tableWrapper.querySelector('thead').style.transform+=+translate
++++++})
++++})
++}|2997944|这里有一个实际的工作示例(我使用了bootstrap使它更漂亮)：fiddle|2997945|对于那些也想支持IE和Edge的人，这里有一个代码片段：|2997946|++fixTables+()+{
++++const+tableWrappers+=+document.querySelectorAll('.tableWrapper')
++++for+(let+i+=+0,+len+=+tableWrappers.length;+i+<+len;+i%2B%2B)+{
++++++tableWrappers[i].addEventListener('scroll',+()+=>+{
++++++++const+translate+=+'translate(0,'+%2B+tableWrappers[i].scrollTop+%2B+'px)'
++++++++const+headers+=+tableWrappers[i].querySelectorAll('thead+th')
++++++++for+(let+i+=+0,+len+=+headers.length;+i+<+len;+i%2B%2B)+{
++++++++++headers[i].style.transform+=+translate
++++++++}
++++++})
++++}
++}|2997947|IE和Edge+scroll有点慢...但它是有效的|2997948|以下是帮助我找到答案的答案：answer|2997949|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/budyniowski/7edk82o4/|1|https://stackoverflow.com/a/25902860/6474767^0|0|0|15|W|0|0|X|6|0|0|0|0|0|E|6|1|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@$I|1B|J|1C|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1E|8|@]|9|@$I|1F|J|1G|1|1H]]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1L|8|@]|9|@$I|1M|J|1N|1|1O]]|A|$]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

<p>This can be achieved by using style property transform.
All you have to do is wrapping your table into some div with fixed height and overflow set to auto, for example:</p>

<pre><code>.tableWrapper {
  overflow: auto;
  height: calc( 100% - 10rem );
}
</code></pre>

<p>And then you can attach onscroll handler to it, here you have method that finds each table wrapped with <code>&lt;div class="tableWrapper"&gt;&lt;/div&gt;</code>:</p>

<pre><code>  fixTables () {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) =&gt; {
      tableWrapper.addEventListener('scroll', () =&gt; {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }
</code></pre>

<p>And here is working example of this in action (i have used bootstrap to make it prettier): <a href="https://jsfiddle.net/budyniowski/7edk82o4/" rel="nofollow noreferrer">fiddle</a></p>

<p>For those who also want to support IE and Edge, here is the snippet:</p>

<pre><code>  fixTables () {
    const tableWrappers = document.querySelectorAll('.tableWrapper')
    for (let i = 0, len = tableWrappers.length; i &lt; len; i++) {
      tableWrappers[i].addEventListener('scroll', () =&gt; {
        const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
        const headers = tableWrappers[i].querySelectorAll('thead th')
        for (let i = 0, len = headers.length; i &lt; len; i++) {
          headers[i].style.transform = translate
        }
      })
    }
  }
</code></pre>

<p>In IE and Edge scroll is a little bit laggy... but it works</p>

<p>Here is answer which helps me to find out this: <a href="https://stackoverflow.com/a/25902860/6474767">answer</a> </p>


blocks|key|3211254|text|创建与主表具有相同标题的额外表。只需将标题放入新的表格中，只有一行和所有的标题。绝对位置和背景白色。对于主表，将其放在div中，并使用一些高度和overflow-y滚动。这样，我们的新表将克服主表的标题，并留在那里。将所有内容包含在div中。下面是执行此操作的粗略代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211255|++++++<div+class="col-sm-8">

++++++++<table+id="header-fixed"+class="table+table-bordered+table-hover"+style="width:+351px;position:+absolute;background:+white;">
++++++++<thead>
++++++++<tr>
++++++++++++<th>Col1</th>
++++++++++++<th>Col2</th>
++++++++++++<th>Col3</th>
++++++++</tr>
++++</thead>
++++++</table>


++++<div+style="height:+300px;overflow-y:+scroll;">
++++++++++<table+id="tableMain"+class="table+table-bordered+table-hover"+style="table-layout:fixed;overflow-wrap:+break-word;cursor:pointer">
<thead>
++++<tr>
++++++<th>Col1</th>
++++++<th>Col2</th>
++++++<th>Col3</th>
++++</tr>
++</thead>
++<tbody>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
++</tbody>

++++++++++++++++++++++++++++++++++++</table>
++++++++++++++</div>
++++++++</div>|code-block|syntax|javascript|3211256|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Create extra table with same header as the main table. Just put thead in the new table with one row and all the headers in it. Do position absolute and background white. For main table put it in a div and use some height and overflow-y scroll. This way our new table will overcome the header of main table and stay there. Surround everything in a div. Below is the rough code to do it.</p>

<pre><code>      &lt;div class="col-sm-8"&gt;

        &lt;table id="header-fixed" class="table table-bordered table-hover" style="width: 351px;position: absolute;background: white;"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Col1&lt;/th&gt;
            &lt;th&gt;Col2&lt;/th&gt;
            &lt;th&gt;Col3&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
      &lt;/table&gt;


    &lt;div style="height: 300px;overflow-y: scroll;"&gt;
          &lt;table id="tableMain" class="table table-bordered table-hover" style="table-layout:fixed;overflow-wrap: break-word;cursor:pointer"&gt;
&lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Col1&lt;/th&gt;
      &lt;th&gt;Col2&lt;/th&gt;
      &lt;th&gt;Col3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;

                                    &lt;/table&gt;
              &lt;/div&gt;
        &lt;/div&gt;
</code></pre>


blocks|key|284447|text|您可以使用这种方法，纯HTML和CSS不需要JS+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284448|​|284449|.table-fixed-header+{
++display:+flex;
++justify-content:+space-between;
++margin-right:+18px
}

.table-fixed+{
++display:+flex;
++justify-content:+space-between;
++height:+150px;
++overflow:+scroll;
}

.column+{
++flex-basis:+24%25;
++border-radius:+5px;
++padding:+5px;
++text-align:+center;
}
.column+.title+{
++border-bottom:+2px+grey+solid;
++border-top:+2px+grey+solid;
++text-align:+center;
++display:+block;
++font-weight:+bold;
}

.cell+{
++padding:+5px;
++border-right:+1px+solid;
++border-left:+1px+solid;
}

.cell:nth-of-type(even)+{
++background-color:+lightgrey;
}|code-block|syntax|javascript|284450|<!DOCTYPE+html>
<html>
<head>
++<meta+charset="utf-8">
++<meta+name="viewport"+content="width=device-width">
++<title>Fixed+header+Bin</title>
</head>
<body>
<div+class="table-fixed-header">
++++
++++<div+class="column">
++++++<span+class="title">col+1</span>
++++</div>
++++<div+class="column">
++++++<span+class="title">col+2</span>
++++</div>
++++<div+class="column">
++++++<span+class="title">col+3</span>
++++</div>
++++<div+class="column">
++++++<span+class="title">col+4</span>
++++</div>
++++
++</div>
++
++<div+class="table-fixed">
++++
++++<div+class="column">
++++++<div+class="cell">alpha</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">ceta</div>
++++</div>
++++
++++<div+class="column">
++++++<div+class="cell">alpha</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">ceta</div>
++++++<div+class="cell">alpha</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">ceta</div>
++++++<div+class="cell">alpha</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">ceta</div>
++++</div>
++++
++++<div+class="column">
++++++<div+class="cell">alpha</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">ceta</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">beta</div>
++++++
++++</div>
++++
++++<div+class="column">
++++++<div+class="cell">alpha</div>
++++++<div+class="cell">beta</div>
++++++<div+class="cell">ceta</div>
++++</div>
++++
++</div>
</body>
</html>|284451|284452|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>you can use this approach, pure HTML and CSS no JS needed :)  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.table-fixed-header {
  display: flex;
  justify-content: space-between;
  margin-right: 18px
}

.table-fixed {
  display: flex;
  justify-content: space-between;
  height: 150px;
  overflow: scroll;
}

.column {
  flex-basis: 24%;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}
.column .title {
  border-bottom: 2px grey solid;
  border-top: 2px grey solid;
  text-align: center;
  display: block;
  font-weight: bold;
}

.cell {
  padding: 5px;
  border-right: 1px solid;
  border-left: 1px solid;
}

.cell:nth-of-type(even) {
  background-color: lightgrey;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;Fixed header Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="table-fixed-header"&gt;
    
    &lt;div class="column"&gt;
      &lt;span class="title"&gt;col 1&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;span class="title"&gt;col 2&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;span class="title"&gt;col 3&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;span class="title"&gt;col 4&lt;/span&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;
  
  &lt;div class="table-fixed"&gt;
    
    &lt;div class="column"&gt;
      &lt;div class="cell"&gt;alpha&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;ceta&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="column"&gt;
      &lt;div class="cell"&gt;alpha&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;ceta&lt;/div&gt;
      &lt;div class="cell"&gt;alpha&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;ceta&lt;/div&gt;
      &lt;div class="cell"&gt;alpha&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;ceta&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="column"&gt;
      &lt;div class="cell"&gt;alpha&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;ceta&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      
    &lt;/div&gt;
    
    &lt;div class="column"&gt;
      &lt;div class="cell"&gt;alpha&lt;/div&gt;
      &lt;div class="cell"&gt;beta&lt;/div&gt;
      &lt;div class="cell"&gt;ceta&lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3211268|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211269|div.wrapper+{
++++padding:20px;
}
table.scroll+thead+{
++++width:+100%25;
++++background:+#FC6822;
}
table.scroll+thead+tr:after+{
++++content:+'';
++++overflow-y:+scroll;
++++visibility:+hidden;
}
table.scroll+thead+th+{
++++flex:+1+auto;
++++display:+block;
++++color:+#fff;
}
table.scroll+tbody+{
++++display:+block;
++++width:+100%25;
++++overflow-y:+auto;
++++height:+auto;
++++max-height:+200px;
}
table.scroll+thead+tr,
table.scroll+tbody+tr+{
++++display:+flex;
}
table.scroll+tbody+tr+td+{
++++flex:+1+auto;
++++word-wrap:+break;
}
table.scroll+thead+tr+th,
table.scroll+tbody+tr+td+{
++++width:+25%25;
++++padding:+5px;
++++text-align-left;
++++border-bottom:+1px+solid+rgba(0,0,0,0.3);
}|code-block|syntax|javascript|3211270|<div+class="wrapper">
++++<table+border="0"+cellpadding="0"+cellspacing="0"+class="scroll">
++++++++<thead>
++++++++++++<tr>
++++++++++++++++<th>Name</th>
++++++++++++++++<th>Vorname</th>
++++++++++++++++<th>Beruf</th>
++++++++++++++++<th>Alter</th>
++++++++++++</tr>
++++++++</thead>
++++++++<tbody>
++++++++++++<tr>
++++++++++++++++<td>Müller</td>
++++++++++++++++<td>Marie</td>
++++++++++++++++<td>Künstlerin</td>
++++++++++++++++<td>26</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Meier</td>
++++++++++++++++<td>Stefan</td>
++++++++++++++++<td>Chemiker</td>
++++++++++++++++<td>52</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Schmidt</td>
++++++++++++++++<td>Sabrine</td>
++++++++++++++++<td>Studentin</td>
++++++++++++++++<td>38</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Mustermann</td>
++++++++++++++++<td>Max</td>
++++++++++++++++<td>Lehrer</td>
++++++++++++++++<td>41</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Müller</td>
++++++++++++++++<td>Marie</td>
++++++++++++++++<td>Künstlerin</td>
++++++++++++++++<td>26</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Meier</td>
++++++++++++++++<td>Stefan</td>
++++++++++++++++<td>Chemiker</td>
++++++++++++++++<td>52</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Schmidt</td>
++++++++++++++++<td>Sabrine</td>
++++++++++++++++<td>Studentin</td>
++++++++++++++++<td>38</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Mustermann</td>
++++++++++++++++<td>Max</td>
++++++++++++++++<td>Lehrer</td>
++++++++++++++++<td>41</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Müller</td>
++++++++++++++++<td>Marie</td>
++++++++++++++++<td>Künstlerin</td>
++++++++++++++++<td>26</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Meier</td>
++++++++++++++++<td>Stefan</td>
++++++++++++++++<td>Chemiker</td>
++++++++++++++++<td>52</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Schmidt</td>
++++++++++++++++<td>Sabrine</td>
++++++++++++++++<td>Studentin</td>
++++++++++++++++<td>38</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Mustermann</td>
++++++++++++++++<td>Max</td>
++++++++++++++++<td>Lehrer</td>
++++++++++++++++<td>41</td>
++++++++++++</tr>
++++++++</tbody>
++++</table>
</div>|3211271|3211272|演示：+css+fixed+table+header+demo|offset|length|style|BOLD|3211273|entityMap|0|LINK|mutability|MUTABLE|url|https://www.revilodesign.de/blog/css-tricks/css-table-header-fixed-thead-einer-tabelle-fixieren/^0|0|0|0|0|0|3|4|R|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@$L|12|M|13|N|O]]|9|@$L|14|M|15|1|16]]|A|$]]|$1|P|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.wrapper {
    padding:20px;
}
table.scroll thead {
    width: 100%;
    background: #FC6822;
}
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: #fff;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align-left;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" class="scroll"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Vorname&lt;/th&gt;
                &lt;th&gt;Beruf&lt;/th&gt;
                &lt;th&gt;Alter&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Müller&lt;/td&gt;
                &lt;td&gt;Marie&lt;/td&gt;
                &lt;td&gt;Künstlerin&lt;/td&gt;
                &lt;td&gt;26&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Meier&lt;/td&gt;
                &lt;td&gt;Stefan&lt;/td&gt;
                &lt;td&gt;Chemiker&lt;/td&gt;
                &lt;td&gt;52&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Schmidt&lt;/td&gt;
                &lt;td&gt;Sabrine&lt;/td&gt;
                &lt;td&gt;Studentin&lt;/td&gt;
                &lt;td&gt;38&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Mustermann&lt;/td&gt;
                &lt;td&gt;Max&lt;/td&gt;
                &lt;td&gt;Lehrer&lt;/td&gt;
                &lt;td&gt;41&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Müller&lt;/td&gt;
                &lt;td&gt;Marie&lt;/td&gt;
                &lt;td&gt;Künstlerin&lt;/td&gt;
                &lt;td&gt;26&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Meier&lt;/td&gt;
                &lt;td&gt;Stefan&lt;/td&gt;
                &lt;td&gt;Chemiker&lt;/td&gt;
                &lt;td&gt;52&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Schmidt&lt;/td&gt;
                &lt;td&gt;Sabrine&lt;/td&gt;
                &lt;td&gt;Studentin&lt;/td&gt;
                &lt;td&gt;38&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Mustermann&lt;/td&gt;
                &lt;td&gt;Max&lt;/td&gt;
                &lt;td&gt;Lehrer&lt;/td&gt;
                &lt;td&gt;41&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Müller&lt;/td&gt;
                &lt;td&gt;Marie&lt;/td&gt;
                &lt;td&gt;Künstlerin&lt;/td&gt;
                &lt;td&gt;26&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Meier&lt;/td&gt;
                &lt;td&gt;Stefan&lt;/td&gt;
                &lt;td&gt;Chemiker&lt;/td&gt;
                &lt;td&gt;52&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Schmidt&lt;/td&gt;
                &lt;td&gt;Sabrine&lt;/td&gt;
                &lt;td&gt;Studentin&lt;/td&gt;
                &lt;td&gt;38&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Mustermann&lt;/td&gt;
                &lt;td&gt;Max&lt;/td&gt;
                &lt;td&gt;Lehrer&lt;/td&gt;
                &lt;td&gt;41&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Demo:</strong> <a href="https://www.revilodesign.de/blog/css-tricks/css-table-header-fixed-thead-einer-tabelle-fixieren/" rel="nofollow noreferrer">css fixed table header demo</a></p>


blocks|key|3211311|text|我尝试了这些解决方案中的大多数，最终找到了(IMO)最好的、现代的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211312|CSS网格|3211313|3211314|使用CSS网格，你可以定义一个‘网格’，并且你最终可以为一个具有固定标题和可滚动内容的表格创建一个漂亮的、无javascript的、跨浏览器的解决方案。标题高度甚至可以是动态的。|3211315|CSS：显示为网格，并设置template-rows的数量|offset|length|style|BOLD|CODE|3211316|.grid+{
++++display:+grid;
++++grid-template-rows:+50px+auto;+//+For+fixed+height+header
++++grid-template-rows:+auto+auto;+//+For+dynamic+height+header
}|code-block|syntax|javascript|3211317|HTML：创建网格容器和定义的rows数量|3211318|<div+class="grid">
++++<div></div>
++++<div></div>
</div>|3211319|3211320|以下是工作示例：|3211321|CSS|3211322|body+{
++margin:+0px;
++padding:+0px;
++text-align:+center;
}

.table+{
++width:+100%25;
++height:+100%25;
++display:+grid;
++grid-template-rows:+50px+auto;
}
.table-heading+{
++background-color:+#ddd;
}
.table-content+{
++overflow-x:+hidden;
++overflow-y:+scroll;
}|3211323|HTML|3211324|<html>
++++<head>
++++</head>
++++<body>
++++++++<div+class="table">
++++++++++++<div+class="table-heading">
++++++++++++++++HEADING
++++++++++++</div>
++++++++++++<div+class="table-content">
++++++++++++++++CONTENT+-+CONTENT+-+CONTENT+<br/>
++++++++++++++++CONTENT+-+CONTENT+-+CONTENT+<br/>
++++++++++++++++CONTENT+-+CONTENT+-+CONTENT+<br/>
++++++++++++++++CONTENT+-+CONTENT+-+CONTENT+<br/>
++++++++++++++++CONTENT+-+CONTENT+-+CONTENT+<br/>
++++++++++++++++CONTENT+-+CONTENT+-+CONTENT+<br/>
++++++++++++</div>
++++++++</div>
++++</body>
</html>|3211325|entityMap^0|0|0|0|0|0|3|D|D|0|0|0|4|F|4|0|0|0|0|0|3|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|1C|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1D|8|@$I|1E|J|1F|K|L]|$I|1G|J|1H|K|M]]|9|@]|A|$]]|$1|N|3|O|5|P|7|1I|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1J|8|@$I|1K|J|1L|K|L]|$I|1M|J|1N|K|M]]|9|@]|A|$]]|$1|U|3|V|5|P|7|1O|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1R|8|@$I|1S|J|1T|K|L]]|9|@]|A|$]]|$1|11|3|12|5|P|7|1U|8|@]|9|@]|A|$Q|R]]|$1|13|3|14|5|6|7|1V|8|@$I|1W|J|1X|K|L]]|9|@]|A|$]]|$1|15|3|16|5|P|7|1Y|8|@]|9|@]|A|$Q|R]]|$1|17|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|18|$]]

<p>I've tried most of these solutions, and eventually found (IMO) the best, modern, solution:</p>

<h2>CSS grids</h2>

<hr>

<p>With CSS grids, you can define a 'grid', and you can <em>finally</em> create a nice, javascript-free, cross-browser solution for a table with a fixed header, and scrollable content. The header height can even dynamic.</p>

<p><strong>CSS</strong>: Display as grid, and set the number of <code>template-rows</code>:</p>

<pre><code>.grid {
    display: grid;
    grid-template-rows: 50px auto; // For fixed height header
    grid-template-rows: auto auto; // For dynamic height header
}
</code></pre>

<p><strong>HTML</strong>: Create a grid container and the number of defined <code>rows</code>:</p>

<pre><code>&lt;div class="grid"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<hr>

<p>Here is working example:</p>

<p><strong>CSS</strong></p>

<pre><code>body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.table {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto;
}
.table-heading {
  background-color: #ddd;
}
.table-content {
  overflow-x: hidden;
  overflow-y: scroll;
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="table"&gt;
            &lt;div class="table-heading"&gt;
                HEADING
            &lt;/div&gt;
            &lt;div class="table-content"&gt;
                CONTENT - CONTENT - CONTENT &lt;br/&gt;
                CONTENT - CONTENT - CONTENT &lt;br/&gt;
                CONTENT - CONTENT - CONTENT &lt;br/&gt;
                CONTENT - CONTENT - CONTENT &lt;br/&gt;
                CONTENT - CONTENT - CONTENT &lt;br/&gt;
                CONTENT - CONTENT - CONTENT &lt;br/&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|3211335|text|我已经用transformation:translate.试过了虽然它在火狐和Chrome上运行良好，但在IE11中根本没有功能。没有双滚动条。支持表格tfoot和标题。纯Javascript，没有jQuery。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3211336|http://jsfiddle.net/wbLqzrfb/42/|3211337|thead.style.transform="translate(0,"%2B(dY-top-1)%2B"px)";|code-block|syntax|javascript|3211338|entityMap|0|LINK|mutability|MUTABLE|url^0|4|O|0|0|W|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|G]]]]

<p>I have tried it using <strong>transformation:translate</strong>. While it works good in Firefox and Chrome, there is simply no function in IE11. No double scroll bars. Supports table tfoot and caption. Pure Javascript, no jQuery.</p>

<p><a href="http://jsfiddle.net/wbLqzrfb/42/" rel="nofollow noreferrer">http://jsfiddle.net/wbLqzrfb/42/</a></p>

<pre><code>thead.style.transform="translate(0,"+(dY-top-1)+"px)";
</code></pre>


blocks|key|2998070|text|用这个解决你的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2998071|tbody+{
++display:+table-caption;
++height:+200px;
++caption-side:+bottom;
++overflow:+auto;
}|code-block|syntax|javascript|2998072|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Fix your issue with this</p>

<pre><code>tbody {
  display: table-caption;
  height: 200px;
  caption-side: bottom;
  overflow: auto;
}
</code></pre>


blocks|key|3211361|text|我找到了一个没有jquery的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3211362|HTML|3211363|<table+class="fixed_header">
++<thead>
++++<tr>
++++++<th>Col+1</th>
++++++<th>Col+2</th>
++++++<th>Col+3</th>
++++++<th>Col+4</th>
++++++<th>Col+5</th>
++++</tr>
++</thead>
++<tbody>
++++<tr>
++++++<td>row+1-0</td>
++++++<td>row+1-1</td>
++++++<td>row+1-2</td>
++++++<td>row+1-3</td>
++++++<td>row+1-4</td>
++++</tr>
++++<tr>
++++++<td>row+2-0</td>
++++++<td>row+2-1</td>
++++++<td>row+2-2</td>
++++++<td>row+2-3</td>
++++++<td>row+2-4</td>
++++</tr>
++++<tr>
++++++<td>row+3-0</td>
++++++<td>row+3-1</td>
++++++<td>row+3-2</td>
++++++<td>row+3-3</td>
++++++<td>row+3-4</td>
++++</tr>
++++<tr>
++++++<td>row+4-0</td>
++++++<td>row+4-1</td>
++++++<td>row+4-2</td>
++++++<td>row+4-3</td>
++++++<td>row+4-4</td>
++++</tr>
++++<tr>
++++++<td>row+5-0</td>
++++++<td>row+5-1</td>
++++++<td>row+5-2</td>
++++++<td>row+5-3</td>
++++++<td>row+5-4</td>
++++</tr>
++++<tr>
++++++<td>row+6-0</td>
++++++<td>row+6-1</td>
++++++<td>row+6-2</td>
++++++<td>row+6-3</td>
++++++<td>row+6-4</td>
++++</tr>
++++<tr>
++++++<td>row+7-0</td>
++++++<td>row+7-1</td>
++++++<td>row+7-2</td>
++++++<td>row+7-3</td>
++++++<td>row+7-4</td>
++++</tr>
++</tbody>
</table>|code-block|syntax|javascript|3211364|CSS|3211365|.fixed_header{
++++width:+400px;
++++table-layout:+fixed;
++++border-collapse:+collapse;
}

.fixed_header+tbody{
++display:block;
++width:+100%25;
++overflow:+auto;
++height:+100px;
}

.fixed_header+thead+tr+{
+++display:+block;
}

.fixed_header+thead+{
++background:+black;
++color:#fff;
}

.fixed_header+th,+.fixed_header+td+{
++padding:+5px;
++text-align:+left;
++width:+200px;
}|3211366|你可以在这里看到它的工作原理：https://jsfiddle.net/lexsoul/fqbsty3h|offset|length|3211367|来源：https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc|3211368|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/lexsoul/fqbsty3h|1|https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc^0|0|0|0|0|0|F|11|0|0|3|2H|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$O|1C|P|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>I found a solution without jquery</p>

<p>HTML</p>

<pre><code>&lt;table class="fixed_header"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Col 1&lt;/th&gt;
      &lt;th&gt;Col 2&lt;/th&gt;
      &lt;th&gt;Col 3&lt;/th&gt;
      &lt;th&gt;Col 4&lt;/th&gt;
      &lt;th&gt;Col 5&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;row 1-0&lt;/td&gt;
      &lt;td&gt;row 1-1&lt;/td&gt;
      &lt;td&gt;row 1-2&lt;/td&gt;
      &lt;td&gt;row 1-3&lt;/td&gt;
      &lt;td&gt;row 1-4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row 2-0&lt;/td&gt;
      &lt;td&gt;row 2-1&lt;/td&gt;
      &lt;td&gt;row 2-2&lt;/td&gt;
      &lt;td&gt;row 2-3&lt;/td&gt;
      &lt;td&gt;row 2-4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row 3-0&lt;/td&gt;
      &lt;td&gt;row 3-1&lt;/td&gt;
      &lt;td&gt;row 3-2&lt;/td&gt;
      &lt;td&gt;row 3-3&lt;/td&gt;
      &lt;td&gt;row 3-4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row 4-0&lt;/td&gt;
      &lt;td&gt;row 4-1&lt;/td&gt;
      &lt;td&gt;row 4-2&lt;/td&gt;
      &lt;td&gt;row 4-3&lt;/td&gt;
      &lt;td&gt;row 4-4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row 5-0&lt;/td&gt;
      &lt;td&gt;row 5-1&lt;/td&gt;
      &lt;td&gt;row 5-2&lt;/td&gt;
      &lt;td&gt;row 5-3&lt;/td&gt;
      &lt;td&gt;row 5-4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row 6-0&lt;/td&gt;
      &lt;td&gt;row 6-1&lt;/td&gt;
      &lt;td&gt;row 6-2&lt;/td&gt;
      &lt;td&gt;row 6-3&lt;/td&gt;
      &lt;td&gt;row 6-4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row 7-0&lt;/td&gt;
      &lt;td&gt;row 7-1&lt;/td&gt;
      &lt;td&gt;row 7-2&lt;/td&gt;
      &lt;td&gt;row 7-3&lt;/td&gt;
      &lt;td&gt;row 7-4&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>CSS</p>

<pre><code>.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}
</code></pre>

<p>You can see it working here: 
<a href="https://jsfiddle.net/lexsoul/fqbsty3h" rel="nofollow noreferrer">https://jsfiddle.net/lexsoul/fqbsty3h</a></p>

<p>Source: <a href="https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc" rel="nofollow noreferrer">https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc</a></p>


blocks|key|2998129|text|这里已经有很多非常好的解决方案了。但我在这些情况下使用的最简单的CSS解决方案之一如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2998130|​|2998131|table+{
++/*+Not+required+only+for+visualizing+*/
++border-collapse:+collapse;
++width:+100%25;
}

table+thead+tr+th+{
++/*+Important+*/
++background-color:+red;
++position:+sticky;
++z-index:+100;
++top:+0;
}

td+{
++/*+Not+required+only+for+visualizing+*/
++padding:+1em;
}|code-block|syntax|javascript|2998132|<table>
++<thead>
++++<tr>
++++++<th>Col1</th>
++++++<th>Col2</th>
++++++<th>Col3</th>
++++</tr>
++</thead>
++<tbody>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
+++++<tr>
+++++++<td>info</td>
+++++++<td>info</td>
+++++++<td>info</td>
+++++</tr>
++</tbody>
</table>|2998133|2998134|因为对JavaScript没有要求，所以它大大简化了这种情况。您基本上需要关注第二个CSS规则，该规则包含确保无论滚动空间如何，表头都保持在顶部的条件。|2998135|详细介绍每条规则。position旨在向浏览器指示head对象、它的行和它的单元格都需要放在顶部。这必然需要伴随着top，它向浏览器指定头部将停留在页面或视口的顶部。此外，您可以添加z-index以确保head的内容始终位于顶部。|offset|length|style|CODE|2998136|背景颜色只是为了说明这一点。您不需要使用任何额外的JavaScript来获得此效果。2016年后的大多数主流浏览器都支持此功能。|2998137|entityMap^0|0|0|0|0|0|0|9|8|1L|3|2J|7|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|13|8|@$P|14|Q|15|R|S]|$P|16|Q|17|R|S]|$P|18|Q|19|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|W|$]]

<p>There are many really good solution here already. But one of the simplest CSS only solutions that I use in these situations is as follows:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* Important */
  background-color: red;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Col1&lt;/th&gt;
      &lt;th&gt;Col2&lt;/th&gt;
      &lt;th&gt;Col3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>Because there is no requirement for JavaScript it simplifies the situation significantly. You essentially need to focus on the <em>second</em> CSS rule, which contains the conditions for ensuring that the head of the table remains of the top no matter the scroll space.</p>

<p>To elaborate on each of the rules in detail. <code>position</code> is meant to indicate to the browser that the head object, its row, and its cells all need to stick to the top. This necessarily needs to be accompanied by <code>top</code>, which specifies to the browser that the head will stick to the top of the page or viewport. Additionally, you can add <code>z-index</code> to ensure that the content of the head always remains on the top.</p>

<p>The background colour is merely to illustrate the point. You do not need to use any additional JavaScript to get this effect. This is supported in most major browsers after 2016.</p>


blocks|key|284533|text|我找到了一个简单的解决方案，不使用JQuery，只使用CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|284534|你必须将固定的内容放在'th‘标签中，并添加CSS|284535|table+th+{
++++position:sticky;
++++top:0;
++++z-index:1;
++++border-top:0;
++++background:+#ededed;
}|code-block|syntax|javascript|284536|position、z-index和top属性就足够了。但您可以应用其余部分以获得更好的视图。|284537|entityMap^0|H|6|R|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>I found a simple solution without using <strong>JQuery</strong> and using <strong>CSS</strong> only.</p>
<p>You have to put the fixed contents inside  'th' tags and add the CSS</p>
<pre><code>table th {
    position:sticky;
    top:0;
    z-index:1;
    border-top:0;
    background: #ededed;
}
   
</code></pre>

<p>The position, z-index and top properties are enough. But you can apply the rest to give for a better view.</p>


blocks|key|285625|text|解决方案在我的例子中，我只使用了css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285626|首先，我们需要如下表格格式：|285627|<table>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td><tr></tbody>
</table>|code-block|syntax|javascript|285628|并应用此css：|285629|tbody+{
++++display:block;
++++max-height:280px;
++++overflow-x:+hidden;
++++overflow-y:+auto;
++++}
++++thead,+tbody+tr+{
++++++++display:table;
++++++++width:100%25;
++++++++table-layout:fixed;
++++}|285630|并且头是固定的|285631|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>solution in my case, i have use only css for this:</p>
<p>first we nee table format like this :</p>
<pre><code>&lt;table&gt;
&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;tr&gt;&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>And apply this css :</p>
<pre><code>tbody {
    display:block;
    max-height:280px;
    overflow-x: hidden;
    overflow-y: auto;
    }
    thead, tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }
</code></pre>
<p>and header is fixed</p>


<p>I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view.  For example, the table may be 500 pixels down from the page, how do I make it so that if the user scrolls the header out of view (browser detects its no longer in the windows view somehow), it will stay put at the top?  Anyone can give me a Javascript solution to this?</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Col1&lt;/th&gt;
      &lt;th&gt;Col2&lt;/th&gt;
      &lt;th&gt;Col3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
       &lt;td&gt;info&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>So in the above example, I want the <code>&lt;thead&gt;</code> to scroll with the page if it goes out of view.</p>

<p>IMPORTANT: I am <strong>NOT</strong> looking for a solution where the <code>&lt;tbody&gt;</code> will have a scrollbar (overflow:auto).</p>


Table header to stay fixed at the top when user scrolls it out of view with jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试设计一个HTML表格，标题将留在页面顶部时，只有当用户滚动出它的视图。例如，表格可能离页面有500个像素，我如何才能使它在用户滚动标题离开视图(浏览器检测到它不再位于窗口视图中)时保持在顶部？有人能给我一个Javascript的解决方案吗？<table>  <thead>    <tr>      <th>C...

问当用户使用jQuery将表头滚动出视图时，表头将固定在顶部
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户使用jQuery将表头滚动出视图时，表头将固定在顶部EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户使用jQuery将表头滚动出视图时，表头将固定在顶部
EN