blocks|key|1381708|text|link+posted+by+pranav的工作示例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1381709|http://jsbin.com/nolanole/1/edit?html,js,output|1381710|仅供参考:+IE+6，7，8(兼容模式开或关)，FF+3&+3.5，Chrome+2。屏幕阅读器不友好(标题不是内容表的一部分)。|1381711|编辑5/5/14:将示例移至jsBin。这是旧的，但令人惊讶的是，它仍然可以在当前的Chrome、IE和Firefox上运行(尽管IE和Firefox可能需要对行高进行一些调整)。|1381712|entityMap|0|LINK|mutability|MUTABLE|url|http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html|1^0|0|L|0|0|0|1B|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|E]]]]

<p>Working example of <a href="http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html" rel="nofollow noreferrer">link posted by pranav</a>:</p>

<p><a href="http://jsbin.com/nolanole/1/edit?html,js,output" rel="nofollow noreferrer">http://jsbin.com/nolanole/1/edit?html,js,output</a></p>

<p>FYI: Tested in IE 6, 7, &amp; 8 (compatibility mode on or off), FF 3 &amp; 3.5, Chrome 2.  Not screen-reader-friendly (headers aren't part of content table).</p>

<p>EDIT 5/5/14: moved example to jsBin.  This is old, but amazingly still works in current Chrome, IE, and Firefox (though IE and Firefox might require some adjustments to row heights).</p>


blocks|key|1381740|text|我认为，尽管这是一个古老的问题，但这是一个很好的地方来插入我自己的脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1381741|http://code.google.com/p/js-scroll-table-header/|offset|length|1381742|它不需要配置就能工作，而且设置起来也很容易。|1381743|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|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>I see this, although an old question, is a pretty good place to plug my own script:</p>

<p><a href="http://code.google.com/p/js-scroll-table-header/" rel="nofollow noreferrer">http://code.google.com/p/js-scroll-table-header/</a></p>

<p>It just works with no configuration and is really easy to setup.</p>


blocks|key|1596658|text|如果您想要的是在表中的数据垂直滚动时保持头部不动，那么您应该实现一个带有"overflow-y:+auto“的样式，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1596659|<table>
++<thead>
++++<tr>
++++++<th>Header1</th>
+++++++.+.+.+
++++</tr>
+++</thead>
+++<tbody+style="height:+300px;+overflow-y:+auto">+
+++++<tr>
+++++++.+.+.
+++++</tr>
+++++.+.+.
+++</tbody>
+</table>|code-block|syntax|javascript|1596660|如果内容的高度超过了所需高度，它将开始滚动。但是，无论滚动位置如何，标题都将固定在顶部。|1596661|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>If what you want is to have the headers stay put while the data in the table scrolls vertically, you should implement a &lt;tbody> styled with "overflow-y: auto" like this:</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header1&lt;/th&gt;
       . . . 
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody style="height: 300px; overflow-y: auto"&gt; 
     &lt;tr&gt;
       . . .
     &lt;/tr&gt;
     . . .
   &lt;/tbody&gt;
 &lt;/table&gt;
</code></pre>

<p>If the &lt;tbody> content grows taller than the desired height, it will start scrolling. However, the headers will stay fixed at the top regardless of the scroll position.</p>


blocks|key|1381828|text|我已经创建了一些东西，它有固定的标题，固定的页脚，固定的左列和固定的右列。这只适用于IE。由于大多数用户仍在使用IE，因此这可能会很有帮助。请在Scrollable+Table中找到代码。请告诉我你的建议。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1381829|同时，我正在努力修复其他浏览器中的列。我会和你保持联系的。:-)|1381830|entityMap|0|LINK|mutability|MUTABLE|url|http://s7u.blogspot.com/2008/07/dear-friends-i-want-to-discuss-about.html^0|20|G|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>I have created something which has fixed header, fixed footer, fixed left column and also fixed right column. This only works fine in IE. As most of the users are still using IE this can be helpful. Please find the code here in <a href="http://s7u.blogspot.com/2008/07/dear-friends-i-want-to-discuss-about.html" rel="nofollow">Scrollable Table</a>. Please let me your suggestions.</p>

<p>Meanwhile I am working to fix columns in other browser. I will keep you posted. :-)</p>


blocks|key|1381839|text|<script>
+++$(document).ready(function+()+{
+++$("#GridHeader+table").html($('#<%25=+GridView1.ClientID+%25>').html());
+++$("#GridHeader+table+tbody+.rows").remove();
+++$('#<%25=+GridView1.ClientID+%25>+tr:first+th').hide();
});
</script>

<div+id="GridHeader">
++++<table></table>
</div>

<div+style="overflow:+auto;+height:400px;">
++++<asp:GridView+ID="GridView1"+runat="server"+/>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1381840|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script&gt;
   $(document).ready(function () {
   $("#GridHeader table").html($('#&lt;%= GridView1.ClientID %&gt;').html());
   $("#GridHeader table tbody .rows").remove();
   $('#&lt;%= GridView1.ClientID %&gt; tr:first th').hide();
});
&lt;/script&gt;

&lt;div id="GridHeader"&gt;
    &lt;table&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;div style="overflow: auto; height:400px;"&gt;
    &lt;asp:GridView ID="GridView1" runat="server" /&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1381872|text|不是很完美，但它让我比这里的一些顶级答案更接近。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1381873|两个不同的表，一个带有标题，另一个用包含内容的div包装|1381874|<table>
++<thead>
++++<tr><th>Stuff</th><th>Second+Stuff</th></tr>
++</thead>
</table>
<div+style="height:+600px;+overflow:+auto;">
++<table>
++++<tbody>
++++++//Table
++++</tbody>
++</table>
</div>|code-block|syntax|javascript|1381875|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Not quite perfect, but it got me closer than some of the top answers here.</p>

<p>Two different tables, one with the header, and the other, wrapped with a div with the content</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;&lt;th&gt;Stuff&lt;/th&gt;&lt;th&gt;Second Stuff&lt;/th&gt;&lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;
&lt;div style="height: 600px; overflow: auto;"&gt;
  &lt;table&gt;
    &lt;tbody&gt;
      //Table
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1596522|text|我知道你可以使用do+it+for+MSIE，而this+limited+example似乎适用于火狐(不确定这项技术的可扩展性有多强)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1596523|entityMap|0|LINK|mutability|MUTABLE|url|http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html|1|http://www.whirlywiryweb.com/q/dhtmlgems.asp^0|8|E|0|O|K|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>I know you can <a href="http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html" rel="nofollow noreferrer">do it for MSIE</a> and <a href="http://www.whirlywiryweb.com/q/dhtmlgems.asp" rel="nofollow noreferrer">this limited example</a> seems to work for firefox (not sure how extensible the technique is).</p>


blocks|key|1596559|text|第一列在标题正下方的单元格上有一个滚动条|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1596560|<table>
++++<thead>
++++++++<th>+Header+1</th>
++++++++<th>+Header+2</th>
++++++++<th>+Header+3</th>
++++</thead>
++++<tbody>
++++++++<tr>
++++++++++++<td>
++++++++++++++++<div+style="width:+50;+height:30;+overflow-y:+scroll">+
++++++++++++++++++++Tklasdjf+alksjf+asjdfk+jsadfl+kajsdl+fjasdk+fljsaldk+
++++++++++++++++++++fjlksa+djflkasjdflkjsadlkf+jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
++++++++++++++++</div>
++++++++++++</td>
++++++++++++<td>
++++++++++++++++Hello+world
++++++++++++</td>
++++++++++++<td>+Hello+world2
++++++++</tr>
++++</tbody>
</table>|code-block|syntax|javascript|1596561|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>The first column has a scrollbar on the cell right below the headers</p>

<pre><code>&lt;table&gt;
    &lt;thead&gt;
        &lt;th&gt; Header 1&lt;/th&gt;
        &lt;th&gt; Header 2&lt;/th&gt;
        &lt;th&gt; Header 3&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;div style="width: 50; height:30; overflow-y: scroll"&gt; 
                    Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
                    fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
                Hello world
            &lt;/td&gt;
            &lt;td&gt; Hello world2
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>


blocks|key|1596702|text|YUI+DataTable|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1596703|我不知道YUI+DT是否有这个功能，但如果有，我不会感到惊讶。|1596704|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/datatable/^0|0|D|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p><a href="http://developer.yahoo.com/yui/datatable/" rel="nofollow noreferrer">YUI DataTable</a></p>

<p>I don't know if YUI DT has this feature but I won't be surprised if it does.</p>


blocks|key|1596836|text|这是一个很好的jQuery插件，可以在所有浏览器中运行！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1596837|你有一个固定的标题表，但没有固定它的宽度。|1596838|检查它：https://github.com/benjaminleouzon/tablefixedheader|offset|length|1596839|免责声明:我是这个插件的作者。|1596840|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/benjaminleouzon/tablefixedheader^0|0|0|4|1F|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>Here is a good jQuery plugin, working in all browsers!</p>

<p>You have a fixed header table without fixing its width.</p>

<p>Check it: <a href="https://github.com/benjaminleouzon/tablefixedheader" rel="nofollow noreferrer">https://github.com/benjaminleouzon/tablefixedheader</a></p>

<p>Disclaimer: I am the author of the plugin.</p>


<p>Is there a CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.</p>

<p>I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.</p>

<p>If there is a jQuery plugin that would be great! If it helps the only browser I care about is Firefox.</p>


HTML table with fixed headers and a fixed column?

jQuery

有没有一种CSS/JavaScript技术可以显示一个长的HTML表格，使列标题在屏幕上保持不变，第一列保持不变，并与数据一起滚动。我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。如果有jQuery插件，那就太好了！如果有用的话，我唯一关心的浏览器就是Firefox。

问具有固定标题和固定列的HTML表？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有固定标题和固定列的HTML表？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有固定标题和固定列的HTML表？
EN