blocks|key|1019587|text|我知道您试图避免使用js/单独的表实现，但这是我能找到的唯一可以跨多个浏览器工作的实现。试试http://www.tablefixedheader.com/。这是一个jquery解决方案，在我有限的测试中，它在IE6+/+IE8+/+FF3之间工作。(还没有测试过FF4)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1019588|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tablefixedheader.com/^0|1A|W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I know you're trying to avoid js/separate table implementations, but it was the only one I could find that worked across multiple browsers.  Try <a href="http://www.tablefixedheader.com/" rel="nofollow">http://www.tablefixedheader.com/</a>.  It's a jquery solution and worked, in my limited testing, across IE6 / IE8 / FF3. (Haven't tested FF4).</p>


blocks|key|1019637|text|试试这个页面的第一种方法，只有一个表的纯CSS+(表周围有两个div，标题是绝对的)：除了IE7/FF3.6之外，tablescroll似乎还可以在FF4/IE9/IE8上工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1019638|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cssplay.co.uk/menu/tablescroll.html^0|1L|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Try the first method of this page, pure CSS with a single table (2 divs around the table, and the thead is positionned absolute) : <a href="http://www.cssplay.co.uk/menu/tablescroll.html" rel="nofollow">tablescroll</a>
Seems to work on FF4/IE9/IE8  in addition to IE7/FF3.6.</p>


blocks|key|805097|text|我刚升级后就被这个玩意儿搞得团团转。嘘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|805098|我在管子里发现了这个。|805099|这段代码可以在FFX4中运行，但不能在IE8中运行...可能会被修改。|805100|http://www.imaputz.com/cssStuff/bigFourVersion.html|offset|length|805101|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|1F|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|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@$H|U|I|V|1|W]]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|G]]]]

<p>Just got slammed with this after I upgraded. Boo.</p>

<p>I found this  in the tubes.</p>

<p>This code is working in FFX 4. Not in IE8... could be modified.</p>

<p><a href="http://www.imaputz.com/cssStuff/bigFourVersion.html" rel="nofollow">http://www.imaputz.com/cssStuff/bigFourVersion.html</a></p>


blocks|key|804896|text|为什么不使用可滚动的div？也许是这两个选项中的一个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|804897|<table>
+<row>
++<cell>
+++<div+of+headers>
+++<div+of+content+(scrollable)>
++</cell>
+</row>
</table>|code-block|syntax|javascript|804898|或者更简单：|804899|<div+of+headers>
<div+(scrollable)>
+<table+of+content,+no+headers>
</div>|804900|不漂亮，我知道，但嘿，我不是米开朗基罗:)|804901|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Why not use a scrollable div? Maybe one of these two options:</p>

<pre><code>&lt;table&gt;
 &lt;row&gt;
  &lt;cell&gt;
   &lt;div of headers&gt;
   &lt;div of content (scrollable)&gt;
  &lt;/cell&gt;
 &lt;/row&gt;
&lt;/table&gt;
</code></pre>

<p>or simpler:</p>

<pre><code>&lt;div of headers&gt;
&lt;div (scrollable)&gt;
 &lt;table of content, no headers&gt;
&lt;/div&gt;
</code></pre>

<p>Not pretty I know but hey I'm no Michaelangelo :)</p>


blocks|key|1019727|text|我做了一个无框架的原型，我想和你分享。它可以在火狐4%2B，IE7-8+(还没有检查过6或9)+Safari和Chrome上运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019728|最大的悬而未决的问题是，当静态标头在数据列之前没有空间收缩时该怎么办。|1019729|对于我正在工作的实际项目，坦率地说，我退出了滚动tbody，转而使用分页。但我处理的是具有排序功能的25%2B列，可能会有上千行。|1019730|不管怎么说，这就是我在放弃它之前到达的地方。如果你改进了，请贴上你的补充:希望这会有帮助。|1019731|Link+to+an+example|offset|length|1019732|++++<!DOCTYPE+html>
<html>
++++<head>
++++++++<title>Table+with+Fixed+Header+Prototype</title>
++++++++<script+type="text/javascript">
++++++++</script>
++++++++<style+type="text/css">
++++++++++++.tableContainer{
++++++++++++++++background:#eee;
++++++++++++++++width:80%25;
++++++++++++}
++++++++++++.scrollContainer{
++++++++++++++++width:100%25;
++++++++++++++++height:500px;+/**+The+only+thing+required+*/
++++++++++++}
++++++++++++.staticHeaderTable{
++++++++++++++++-moz-box-shadow:+1px+4px+5px+#cccccc;
++++++++++++++++-webkit-box-shadow:1px+4px+5px+#cccccc;
++++++++++++++++box-shadow:+1px+4px+5px+#cccccc;
++++++++++++++++position:+relative;
++++++++++++++++z-index:+10;
++++++++++++}
++++++++/*****************************************************/
++++++++/****+Generic+styles+outside+of+problem+scope+****/

++++++++++++table{border-collapse:+collapse;font:normal+12px+sans-serif;}
++++++++++++th,td{padding:2px;+height:20px;border:1px+solid+#dddddd;}
++++++++++++th{background:#ffcc00;}
++++++++</style>
++++</head>
<body>
<script>
function+makeStaticTableHeaders(tableId){
//+Overall+Container+:+wraps+everything
++++var+tableContainer+=+document.createElement("div");
++++++++tableContainer.className+=+"tableContainer";

//+Scrolling+Container+:+must+have+a+height.(Set+in+CSSS+in+this+sample)+this+contains+the+table+without+the+head+or+foot+++
++++var+scrollContainer+=+document.createElement("div");
++++++++scrollContainer.className+=+"scrollContainer";
++++++++scrollContainer.style.overflowY+=+"auto";+//+just+Y+since+IE7+doesn't+add+the+scrollbar+to+the+width.
++++++++scrollContainer.style.overflowX+=+"hidden";+//+IE7+override.+consider+a+CSS+fix
++++++++scrollContainer.style.width+=+"100%25";

//+Identifies+the+actual+table+to+wrap+from+the+dom.+exits+if+it+can't+be+found
++++var+dataTable+=+document.getElementById(tableId);
++++if(typeof(dataTable)+==+"undefined"){
++++++++return+false;
++++}
++++dataTable.style.width+=+"100%25";

//+Identify+the+header.+If+there+is+none,+there+is+no+point+in+this+so+exit.
++++var+header+=+dataTable.getElementsByTagName("thead");
++++if+(header.length+==+0){
++++++++return+false;
++++}
++++for+(var+i+=+0;+i+<+header.length;+i%2B%2B)
++++{
++++++++if(header[i].className.indexOf("static")+!=+-1){+
++++++++++++header+=+header[i];
++++++++++++break;+
++++++++}
++++++++if(i+==+header.length+-+1){
++++++++++++header+=+header[i];//+failsafe
++++++++}
++++}
//+If+we+are+still+here,+we+begin+the+process+of+altering+the+DOM+elements
++++//+1.+Insert+the+tableContainer+in+front+of+the+dataTable
++++dataTable.parentNode.insertBefore(tableContainer,+dataTable);

++++//+2.+Insert+the+scrollContainer+into+the+table+container
++++tableContainer.appendChild(scrollContainer);
++++//+3.+get+the+thead+tr+and+create+staticHeaderTable+with+the+tr
++++var+headerRow+=+header.getElementsByTagName("tr")[header.getElementsByTagName("tr").length+-+1];+//+gets+last+tr+in+case+there+is+more+than+one
++++var+staticHeaderTable+=+document.createElement("table");
++++++++staticHeaderTable.className+=+"staticHeaderTable";
++++++++staticHeaderTable.appendChild(header);
++++++++staticHeaderTable.style.width+=+"100%25";

++++//+4.+Put+the+staticHeaderTable+in+the+scrollContanier+
++++tableContainer.insertBefore(staticHeaderTable,+scrollContainer);

++++//+5.+take+the+datatable+out+of+the+dom+and+put+it+in+the+scrollContainer
++++scrollContainer.appendChild(dataTable);

++++//+6.+footer(optional)
++++var+footer+=+dataTable.getElementsByTagName("tfoot");
++++if+(footer.length+>+0){
++++++++for+(var+i+=+0;+i+<+footer.length;+i%2B%2B)
++++++++{
++++++++++++if(footer[i].className.indexOf("static")+!=+-1){
++++++++++++++++footer+=+footer[i];
++++++++++++++++break;+
++++++++++++}
++++++++++++if(i+==+footer.length+-+1){
++++++++++++++++footer+=+footer[i];//+failsafe
++++++++++++}
++++++++}
++++++++//+TODO:+footer+assumes+columns+are+not+linked+to+the+data+columns.+++++
++++++++var+staticFooterTable+=+document.createElement("table");
++++++++++++staticFooterTable.className+=+"staticFooterTable";
++++++++++++staticFooterTable.appendChild(footer);
++++++++++++staticFooterTable.style.width+=+"100%25";
++++++++++++tableContainer.appendChild(staticFooterTable);
++++}


++++function+tableResize(){
++++++++var+firsttableRow+=+dataTable.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0];
++++++++var+extra+=+headerRow.offsetWidth+-+firsttableRow.offsetWidth;
++++++++var+headerCells+=+(headerRow.getElementsByTagName("td").length+>+0+)?+headerRow.getElementsByTagName("td")+:+headerRow.getElementsByTagName("th");
++++++++for(var+i=0;+i+<headerCells.length;i%2B%2B){
++++++++++++headerCells[i].style.width+=+firsttableRow.getElementsByTagName("td")[i].offsetWidth+%2B+((i==headerCells.length-1)?+extra:+0)+%2B+"px";
++++++++}
++++};
++++if(window.addEventListener)+{window.addEventListener("resize",+tableResize,+false);}
++++else{window.attachEvent("onresize",+tableResize);}
++++tableResize();
}

window.onload+=+function(){
++++var+staticTable+=+makeStaticTableHeaders("dataTable");
}

</script>
<h2>Datatable</h2>

++++<table+id="dataTable"+class="dataTable">
++++++++<thead+class="static">
++++++++++++<tr>
++++++++++++++++<th>Header+1+A+long+One</th>
++++++++++++++++<th>Header+2</th>
++++++++++++++++<th>Header+3</th>
++++++++++++</tr>
++++++++</thead>
++++++++<tbody>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1+All+the+good+Stuff+is+in+here</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>

++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>

++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>

++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>

++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>

++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>

++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>

++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>

++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>
++++++++++++<tr>

++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>

++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>

++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>

++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>

++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>

++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>

++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>

++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>

++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>

++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>

++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>

++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>

++++++++++++++++<td>More+Cell+Content+1</td>
++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>

++++++++++++++++<td>Even+More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>And+Repeat+1</td>
++++++++++++++++<td>And+Repeat+2</td>
++++++++++++++++<td>And+Repeat+3</td>
++++++++++++</tr>

++++++++++++<tr>
++++++++++++++++<td>Cell+Content+1</td>
++++++++++++++++<td>Cell+Content+2</td>
++++++++++++++++<td>Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>More+Cell+Content+1</td>

++++++++++++++++<td>More+Cell+Content+2</td>
++++++++++++++++<td>More+Cell+Content+3</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>Even+More+Cell+Content+1</td>
++++++++++++++++<td>Even+More+Cell+Content+2</td>
++++++++++++++++<td>Even+More+Cell+Content+3</td>

++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>End+of+Cell+Content+1</td>
++++++++++++++++<td>End+of+Cell+Content+2</td>
++++++++++++++++<td>End+of+Cell+Content+3</td>
++++++++++++</tr>+++
++++++++</tbody>
++++++++<tfoot>
++++++++++++<tr>
++++++++++++++++<td+colspan="3">Footer+Is+Here</td>
++++++++++++</tr>
++++++++</tfoot>
++++</table>
</body>+
</html>|code-block|syntax|javascript|1019733|entityMap|0|LINK|mutability|MUTABLE|url|http://camuti.com/prototypes/staticheader.html^0|0|0|0|0|0|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@$J|13|K|14|1|15]]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I worked on a frameworkless prototype I want to share with you.
It's working in Firefox 4+, IE7-8 (haven't checked 6 or 9) Safari and Chrome.</p>

<p>The biggest unsolved problem is what to do when the static headers run out of room to shrink before the data columns do. </p>

<p>For the actual project I was working on frankly I backed out of the scrolling tbody and went with pagination. but I was dealing with 25+ columns with sorting and potentially 1000s of rows.</p>

<p>Anyway this is where I got to before I abandoned it. Please post your additions if you improve it:
Hope this helps.</p>

<p><a href="http://camuti.com/prototypes/staticheader.html" rel="nofollow">Link to an example</a></p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Table with Fixed Header Prototype&lt;/title&gt;
        &lt;script type="text/javascript"&gt;
        &lt;/script&gt;
        &lt;style type="text/css"&gt;
            .tableContainer{
                background:#eee;
                width:80%;
            }
            .scrollContainer{
                width:100%;
                height:500px; /** The only thing required */
            }
            .staticHeaderTable{
                -moz-box-shadow: 1px 4px 5px #cccccc;
                -webkit-box-shadow:1px 4px 5px #cccccc;
                box-shadow: 1px 4px 5px #cccccc;
                position: relative;
                z-index: 10;
            }
        /*****************************************************/
        /**** Generic styles outside of problem scope ****/

            table{border-collapse: collapse;font:normal 12px sans-serif;}
            th,td{padding:2px; height:20px;border:1px solid #dddddd;}
            th{background:#ffcc00;}
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
function makeStaticTableHeaders(tableId){
// Overall Container : wraps everything
    var tableContainer = document.createElement("div");
        tableContainer.className = "tableContainer";

// Scrolling Container : must have a height.(Set in CSSS in this sample) this contains the table without the head or foot   
    var scrollContainer = document.createElement("div");
        scrollContainer.className = "scrollContainer";
        scrollContainer.style.overflowY = "auto"; // just Y since IE7 doesn't add the scrollbar to the width.
        scrollContainer.style.overflowX = "hidden"; // IE7 override. consider a CSS fix
        scrollContainer.style.width = "100%";

// Identifies the actual table to wrap from the dom. exits if it can't be found
    var dataTable = document.getElementById(tableId);
    if(typeof(dataTable) == "undefined"){
        return false;
    }
    dataTable.style.width = "100%";

// Identify the header. If there is none, there is no point in this so exit.
    var header = dataTable.getElementsByTagName("thead");
    if (header.length == 0){
        return false;
    }
    for (var i = 0; i &lt; header.length; i++)
    {
        if(header[i].className.indexOf("static") != -1){ 
            header = header[i];
            break; 
        }
        if(i == header.length - 1){
            header = header[i];// failsafe
        }
    }
// If we are still here, we begin the process of altering the DOM elements
    // 1. Insert the tableContainer in front of the dataTable
    dataTable.parentNode.insertBefore(tableContainer, dataTable);

    // 2. Insert the scrollContainer into the table container
    tableContainer.appendChild(scrollContainer);
    // 3. get the thead tr and create staticHeaderTable with the tr
    var headerRow = header.getElementsByTagName("tr")[header.getElementsByTagName("tr").length - 1]; // gets last tr in case there is more than one
    var staticHeaderTable = document.createElement("table");
        staticHeaderTable.className = "staticHeaderTable";
        staticHeaderTable.appendChild(header);
        staticHeaderTable.style.width = "100%";

    // 4. Put the staticHeaderTable in the scrollContanier 
    tableContainer.insertBefore(staticHeaderTable, scrollContainer);

    // 5. take the datatable out of the dom and put it in the scrollContainer
    scrollContainer.appendChild(dataTable);

    // 6. footer(optional)
    var footer = dataTable.getElementsByTagName("tfoot");
    if (footer.length &gt; 0){
        for (var i = 0; i &lt; footer.length; i++)
        {
            if(footer[i].className.indexOf("static") != -1){
                footer = footer[i];
                break; 
            }
            if(i == footer.length - 1){
                footer = footer[i];// failsafe
            }
        }
        // TODO: footer assumes columns are not linked to the data columns.     
        var staticFooterTable = document.createElement("table");
            staticFooterTable.className = "staticFooterTable";
            staticFooterTable.appendChild(footer);
            staticFooterTable.style.width = "100%";
            tableContainer.appendChild(staticFooterTable);
    }


    function tableResize(){
        var firsttableRow = dataTable.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0];
        var extra = headerRow.offsetWidth - firsttableRow.offsetWidth;
        var headerCells = (headerRow.getElementsByTagName("td").length &gt; 0 )? headerRow.getElementsByTagName("td") : headerRow.getElementsByTagName("th");
        for(var i=0; i &lt;headerCells.length;i++){
            headerCells[i].style.width = firsttableRow.getElementsByTagName("td")[i].offsetWidth + ((i==headerCells.length-1)? extra: 0) + "px";
        }
    };
    if(window.addEventListener) {window.addEventListener("resize", tableResize, false);}
    else{window.attachEvent("onresize", tableResize);}
    tableResize();
}

window.onload = function(){
    var staticTable = makeStaticTableHeaders("dataTable");
}

&lt;/script&gt;
&lt;h2&gt;Datatable&lt;/h2&gt;

    &lt;table id="dataTable" class="dataTable"&gt;
        &lt;thead class="static"&gt;
            &lt;tr&gt;
                &lt;th&gt;Header 1 A long One&lt;/th&gt;
                &lt;th&gt;Header 2&lt;/th&gt;
                &lt;th&gt;Header 3&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1 All the good Stuff is in here&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;

                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;

                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;

            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;

                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;

                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;

                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;

            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;

                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;

                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;

                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;

            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;

                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;

                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;

                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;

            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;

                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;

                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;

                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;

            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;

                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;

                &lt;td&gt;More Cell Content 1&lt;/td&gt;
                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;

                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;And Repeat 1&lt;/td&gt;
                &lt;td&gt;And Repeat 2&lt;/td&gt;
                &lt;td&gt;And Repeat 3&lt;/td&gt;
            &lt;/tr&gt;

            &lt;tr&gt;
                &lt;td&gt;Cell Content 1&lt;/td&gt;
                &lt;td&gt;Cell Content 2&lt;/td&gt;
                &lt;td&gt;Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;More Cell Content 1&lt;/td&gt;

                &lt;td&gt;More Cell Content 2&lt;/td&gt;
                &lt;td&gt;More Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Even More Cell Content 1&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 2&lt;/td&gt;
                &lt;td&gt;Even More Cell Content 3&lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;End of Cell Content 1&lt;/td&gt;
                &lt;td&gt;End of Cell Content 2&lt;/td&gt;
                &lt;td&gt;End of Cell Content 3&lt;/td&gt;
            &lt;/tr&gt;   
        &lt;/tbody&gt;
        &lt;tfoot&gt;
            &lt;tr&gt;
                &lt;td colspan="3"&gt;Footer Is Here&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tfoot&gt;
    &lt;/table&gt;
&lt;/body&gt; 
&lt;/html&gt;
</code></pre>


<p>Well as mentioned in the Firefox 4 <a href="https://developer.mozilla.org/En/Firefox_4_for_developers#Miscellaneous_CSS.c2.a0changes" rel="nofollow noreferrer">changelog</a>, there will be no longer support for scrollable <code>&lt;tbody&gt;</code>'s.</p>

<p>There are a bunch of <a href="https://stackoverflow.com/questions/130564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put">workarounds</a> - javascript or 2 seperate tables - but none of them solves all problems. Javascript is obviously slower (with 600 rows you can forget to try to scroll a table), and 2 tables are gonna be problematic with cell-width.</p>

<p>Do you know if there is some cool way to do this? We are using jsf / facelets and now have to redo the tags, starting with a good idea would be awesome :-)</p>


FireFox 4 no longer supports scrollable TBody - workarounds?

正如Firefox4 中提到的，将不再支持可滚动的<tbody>。有一堆 - javascript或2个单独的表-但它们都不能解决所有问题。Javascript显然更慢(有600行，您可以忘记尝试滚动表格)，并且两个表格的单元格宽度将会出现问题。你知道有什么很酷的方法可以做到这一点吗？我们正在使用jsf / facelets，现在必须重做标签，从一个好的想法开始会很棒:-)

问FireFox 4不再支持可滚动的TBody解决方案？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FireFox 4不再支持可滚动的TBody解决方案？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FireFox 4不再支持可滚动的TBody解决方案？
EN