Javascript 如何创建包含colspans的固定表头行？
我有一个从数据库数据创建的大型动态表。我需要列标题行保持固定，并根据需要滚动行 我在网上尝试了很多脚本，试图让它正常工作。我希望在浏览器上保持这种简单易用的方式，因为有些目标计算机相当蹩脚 以下是我的工作内容：Javascript 如何创建包含colspans的固定表头行？,javascript,jquery,css,html-table,Javascript,Jquery,Css,Html Table,我有一个从数据库数据创建的大型动态表。我需要列标题行保持固定，并根据需要滚动行 我在网上尝试了很多脚本，试图让它正常工作。我希望在浏览器上保持这种简单易用的方式，因为有些目标计算机相当蹩脚 以下是我的工作内容： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Sa
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample</title>
</head>
<body>
<br><br><br><br>
<table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
<tr bgcolor='gray'>
<td>
<br><br><br>
need the blue column heading rows to remain fixed, and scroll the green rows:<br>
<table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
<thead>
<tr>
<th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
<th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
<th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
<th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th>
<th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 3</th>
<th width="150px" style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 4<br>more<br>more</th>
<th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 5</th>
</tr>
<tr>
<th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-b</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-c</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-d</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-e</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">Z</th>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="PaleGreen" colspan="3" align="center" valign="middle">Col 1<br>more</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[1]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[2]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[3]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[4]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[5]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[6]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[7]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
</tr>
</tbody>
</table>
<br><br><br><br>
</td>
</tr>
</table>
<br><br><br><br><br><br>
</body>
</html>
样品
需要蓝色列标题行保持固定，并滚动绿色行：
第1a列
第1b栏
第1c列
第2列
第3列
第4列
更多
更多
第5列
第1列
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
Z
第1列
更多
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a列
柱1b+c
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a+b列
第1c列
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a列
Col 1b+c
更多
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a+b列
第1c列
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a列
柱1b+c
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a+b列
第1c列
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a列
柱1b+c
更多
更多
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a+b列
第1c列
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a列
柱1b+c
更多
更多
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
第1a+b列
col1c
更多
更多
更多
更多
更多
更多
更多
更多
更多
更多
A.
B
C
1.
4-a
4-b
4-c
四维
4-e
<table border="1">
<colgroup>
<td width="100px">Column 1</td>
<td width="100px">Column 2</td>
<td width="100px">Column 3</td>
<td width="16px" style="background-color: gray;"><td>
</colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
<table border="1">
<colgroup>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</colgroup>
<tbody>
<tr>
<td>Row 1 - Cell 1</td>
<td>Row 1 - Cell 2</td>
<td>Row 1 - Cell 3</td>
</tr>
<tr>
// rest omitted, see DEMO for full table
</tr>
</tbody>
</table>
</div>
我认为CSS可以使用类来代替。我把这个留给你 摘要
我相信有一种更优雅的方式来实现你想要的，可能一些脚本wiz已经为它提供了一个插件。在那之前，这似乎是可行的。如果将大量长数据输入到列中，也可能会出现列再次开始失去接近600像素的对齐，但如上所述，这是一个非常个性化的解决方案，随着时间的推移，您可能需要使用jQuery为某些宽度添加一些动态计算 编辑——2012年8月9日 关于设置我在评论中提到的td的宽度。我使用我提到的类修复了第一列中的长文本问题。在IE、FF和Chrome中工作 看 我使用了评论中提到的逻辑。您可能会找到更好的命名约定。我只是使用了主列+每个子列的一个开/关开关。对于第1列样式，其结果如下所示：
.col01-000{
width: 0px;
}
.col01-001{
width: 75px;
}
.col01-010, .col01-100{
width: 50px;
}
.col01-011, .col01-101{
width: 125px;
}
.col01-110{
width: 100px;
}
col01-10050px第二个td现在有一个类
col01-011.col01-000{
width: 0px;
}
.col01-001{
width: 75px;
}
.col01-010, .col01-100{
width: 50px;
}
.col01-011, .col01-101{
width: 125px;
}
.col01-110{
width: 100px;
}
<table>
<tr><th>...</th></tr>
<tr><td>
<div><inner table></div>
</td></tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Scrollable Table with Fixed Header</title>
<meta http-equiv="language" content="en-us">
<script type="text/javascript">
function removeClassName (elem, className) {
elem.className = elem.className.replace(className, "").trim();
}
function addCSSClass (elem, className) {
removeClassName (elem, className);
elem.className = (elem.className + " " + className).trim();
}
String.prototype.trim = function() {
return this.replace( /^\s+|\s+$/, "" );
}
function stripedTable() {
if (document.getElementById && document.getElementsByTagName) {
var allTables = document.getElementsByTagName('table');
if (!allTables) { return; }
for (var i = 0; i < allTables.length; i++) {
if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
var trs = allTables[i].getElementsByTagName("tr");
for (var j = 0; j < trs.length; j++) {
removeClassName(trs[j], 'alternateRow');
addCSSClass(trs[j], 'normalRow');
}
for (var k = 0; k < trs.length; k += 2) {
removeClassName(trs[k], 'normalRow');
addCSSClass(trs[k], 'alternateRow');
}
}
}
}
}
window.onload = function() { stripedTable(); }
</script>
<style type="text/css">
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h2 {
font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h3 {
font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #008000;
margin: 0 0 15px 0
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
div.tableContainer table {
float: left;
width: 740px
}
html>body div.tableContainer table {
width: 756px
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th + th {
width: 240px
}
html>body thead.fixedHeader th + th + th {
width: 316px
}
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
</style>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th><a href="">Header 1</a></th>
<th><a href="">Header 2</a></th>
<th><a href="">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body></html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
var Browser = {
version: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1) {
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return version;
}
}
var $thead = $('#XYZ thead'),
$new_thead = $thead.clone().hide(),
$window = $(window),
distance_from_top = $thead.offset().top,
did_scroll = false; // http://ejohn.org/blog/learning-from-twitter/
// for IE <= 7
var $tr_1, $tr_2;
// add the cloned thead
$thead.after($new_thead);
if( Browser.version() < 8 ) {
$new_thead.find('tr').css({
'position': 'absolute',
'top': 0,
'margin-left': -1
});
$tr_1 = $new_thead.find('tr:first');
$tr_2 = $new_thead.find('tr:last').css('top', $tr_1.height());
}else {
$new_thead.css({
'position': 'fixed',
'width': $thead.width(),
'top': 0
});
}
$window.scroll(function() {
if( Browser.version() < 8 ) {
did_scroll = true;
}
if( $window.scrollTop() >= distance_from_top ) {
$new_thead.show();
}else {
$new_thead.hide();
}
});
setInterval(function() {
if( did_scroll ) {
did_scroll = false;
$tr_1.css('top', $window.scrollTop());
$tr_2.css('top', $tr_1.height() + $window.scrollTop());
}
}, 250);
</script>
var table = $('#XYZ'),
thead = table.find('thead'),
fixed_thead = thead.clone(),
// create a copy of the original table
fixed_thead_wrapper = $('<table />', {
'id': 'fixed_thead_wrapper',
'align': 'center',
'width': table.outerWidth(),
'border': '1',
'cellspacing': 0,
'cellpadding': 0
}).insertBefore(table),
// this forces the table to be in a scrollable area
table_wrapper = $('<div />', {
'id': 'fixed_table_wrapper',
'height': 300,
css: {
'overflow': 'auto'
}
});
// add the cloned thead to the new table
fixed_thead_wrapper.append(fixed_thead);
// hide the original thead.
// this is a very hackish way of doing this, but I'm not sure of a better way as of right now
table.css({
'position': 'relative',
'top': fixed_thead_wrapper.height() * -1
});
// wrap the original table
table.wrap(table_wrapper);
// line the tables up now that the scrollbar is present
fixed_thead_wrapper.css({
'position': 'relative',
'left': table.offset().left - fixed_thead_wrapper.offset().left
});
jQuery(document).ready(function () {
jQuery("body").append("<table class='tableheader' align='center' border='1' width='625' cellspacing='0' cellpadding='0'></table>");
jQuery(".tableheader").append(jQuery(".base2 thead").clone());
var headerToMove = jQuery(".tableheader");
var headerOffsetTop = headerToMove.offset().top;
var headerPosition = headerToMove.position();
jQuery(window).scroll(function () { scroll_post_header(); });
function scroll_post_header() {
var new_position = headerOffsetTop - jQuery(window).scrollTop();
if (new_position < 0) { new_position = 0;}
if (headerPosition.top != new_position) {
headerToMove.css("top",new_position);
//headerToMove.stop().animate({ 'top': new_position }, 300);
}
if (jQuery(window).scrollTop() < 15) { headerToMove.css("top",headerOffsetTop);}
}
});
.tableheader {
position: fixed;
height: 80px;
top: 160px;
left: 2.5%;
z-index: 1000;
}
$(function() {
(function($) {
$.fn.fTable = function(o) {
var tableTmpl = '<table id="XYZ_fixed" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base"></table>';
this.wrap('<div class="fTable_container" />');
var fc = this.parent();
fc.css('width', this.width() + 18);
this.wrap('<div class="fTable_rContainer" />');
var rc = this.parent();
rc.css('height', o.height);
var fTable = $(tableTmpl);
fTable
.addClass('fTable_fixedHead')
.html(this.find('thead').clone())
.prependTo(rc);
$(window).on('scroll resize', function () {
console.log(isScroll());
if (isScroll()) {
fTable.css('left', $(this).scrollLeft() * -1);
} else {
fTable.css('left', '');
}
});
};
function isScroll() {
var root= document.compatMode=='BackCompat'?
document.body : document.documentElement;
return root.scrollWidth>root.clientWidth;
}
})(jQuery);
$('#XYZ').fTable({
height: 300
});
});
.fTable_rContainer {
position: relative;
overflow: auto;
height: 300px; /* Height of the table */
}
.fTable_container {
width: 643px; /* Total width of the table you set + 18px (scroll size) */
}
.fTable_fixedHead {
position: fixed;
}
$(function() {
(function($) {
$.fn.fTable = function(o) {
/* Preserve the attr list from original table */
var el = this[0], arr = [], it;
for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
it = attrs.item(i);
if (it.nodeName == 'id') {
arr.push(it.nodeName + '="' + it.nodeValue + '_fixed"');
} else {
arr.push(it.nodeName + '="' + it.nodeValue + '"');
}
}
var tableTmpl = '<table ' + arr.join(' ') + '></table>';
/* Wrap it inside div's */
this.wrap('<div class="fTable_container" />');
this.wrap('<div class="fTable_rContainer" />');
var rc = this.parent();
/* Clone the thead and add it to the fixed table head */
$(tableTmpl)
.addClass('fTable_fixedHead')
.html(this.find('thead').clone())
.prependTo(rc);
/* Position the fixed head table on scroll */
rc.scroll(function() {
rc.find('.fTable_fixedHead').css('top', $(this).scrollTop());
});
var _that = this;
rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
/* Position the left on resize*/
$(window).resize(function() {
rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
});
};
/* Position fix for webkit browsers */
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft - parentLeft,
top: thisTop - parentTop
}
}
})(jQuery);
$('#XYZ').fTable({
height: 300
});
$(function(){
var $window = $(window),
stickyTable = $('#XYZ'),
stickyHeader = stickyTable.clone(true),
tableTop = stickyTable.offset().top,
isSticky = false;
handleScroll();
$window.on({
scroll: handleScroll,
resize: handleResize
});
stickyHeader.find('tbody').remove();
stickyHeader.find('tfoot').remove();
stickyHeader.addClass('sticky-header').appendTo('body');
function handleScroll() {
var scrollTop = $window.scrollTop();
if(scrollTop > tableTop && !isSticky) {
stickyHeader.css('left',stickyTable.offset().left+'px').show();
isSticky = true;
} else if(scrollTop <= tableTop && isSticky) {
stickyHeader.hide();
isSticky = false;
}
}
function handleResize() {
if(isSticky) {
stickyHeader.css('left',stickyTable.offset().left+'px');
}
}
});