我已经试过找遍各地，并找不到解决我的问题的好方法。我正在寻找创建一个固定标题的表格，并在滚动表格的其余部分时留下。问题是我也希望它能够在页面窗口调整时进行对齐。我已经能够获得固定的标题，并且能够在调整窗口时获得列对齐，只是没有能够让两者协同工作。有没有可以做到这一点的脚本？我已经尝试了固定头巾jquery，flexigrid，固定头咖啡，chromatable和floatyhead。这些都不能给我我正在寻找的解决方案。也许我做错了什么，但我有一个传统的表，使用头，tbody等我想避免把表分成两个表，因为它似乎从来没有正确排列，但如果这是唯一的解决方案，我会拿去。在窗口可调表上寻找固定标题
请帮忙！ 谢谢！
试试这个答案， 它工作在IE8，Firefox和Chrome ..
风格
.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }
.BigTable { width: 100%; }
.BigTable td { width: 40%; }
.BigTable td + td { width: 30%; }
.BigTable td + td + td { width: 30%; }
.Header { margin-left: 200px; height: 30px; background-color: blue; }
.Header .Heading { width: 40%; float: left; height: 30px; }
.Header .Heading + .Heading { width: 30%; }
.Header .Heading + .Heading + .Heading { width: 30%; }
表
<div class="Header">
<div class="Heading">Heading 1</div>
<div class="Heading">Heading 2</div>
<div class="Heading">Heading 3</div>
</div>
<div class="Container">
<table class="BigTable">
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>
或试试这个
#listBevel, #listTable {
position: absolute;
z-index: 2;
border: 1px solid #989898;
top: 85px;
left: 227px;
right: 37px;
height: 270px;
min-width: 654px;
}
/* @group List Table Headers */
#listTableHeaders {
position: absolute;
z-index: 3;
top: 67px;
left: 39px;
right: 37px;
height: 500px;
min-width: 654px;
border: 1px solid #989898;
overflow: hidden;
overflow-y: scroll;
}
.tableHeaderShadow {
background: url(/images/interface/bevel_shadow.png) repeat-x;
position: fixed;
height: 5px;
top: 105px;
right: 53px;
left: 228px;
min-width: 639px;
}
#scrollBarCoverContainer {
position: fixed;
z-index: 5;
top: 86px;
left: 228px;
right: 38px;
height: 0;
min-width: 654px;
font-size: 11px;
border: 1px none #989898;
text-align: right;
}
#scrollBarCoverUp {
background: url(/images/interface/list_header_bg.png) repeat-x;
width: 14px;
height: 18px;
border-left: 1px solid #e5e5e5;
float: right;
}
table#entryListHeaders th img.sortArrow {
float: right;
}
table#entryListHeaders th a {
color: #000;
text-decoration: none;
display: block;
height: 18px;
}
table#entryListHeaders th:hover {
background-position: 0 -18px;
cursor: default;
}
table#entryListHeaders th {
background: url(/images/interface/list_header_bg.png) repeat-x;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #a5a5a5;
text-align: left;
padding: 0 5px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
width: 42%;
font-size: 11px;
line-height: 1.6em;
text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
width: 32%;
}
table#entryListHeaders th.selectedHeader {
text-shadow: #d8e6ff 0 1px 0;
background-image: url(/images/interface/list_header_selected.png);
border-left-color: #c2d4f2;
}
#listTable {
background-color: #fefefe;
top: 104px;
height: 251px;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
font-size: 11px;
border-collapse: collapse;
}
table#entryList {
}
table#entryList td {
width: 42%;
}
span.truncateText {
display: block;
height: 18px;
overflow: hidden;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
border-right: 1px hidden #cbd1d8;
padding: 1px 5px;
height: 18px;
line-height: 1.6em;
margin: 0;
border-left-style: hidden;
border-left-width: 1px;
}
tbody.scrollContent tr.alternateRow {
background: #eaf2ff;
}
tbody.scrollContent tr.selectedRow td {
background: url(/images/interface/selected_row.png) repeat-x;
color: #fff;
border-right-style: hidden;
}
table#entryList td + td {
width: 32%;
}
tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
background-color: #d8e7ff;
cursor: default;
}
<div id="scrollBarCoverContainer">
<div id="scrollBarCoverUp"></div>
<div class="tableHeaderShadow"></div>
</div>
<div id="listTableHeaders">
<table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr>
<th id="selectedHeader">Name</th>
<th>Domain</th>
<th>>Modified</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>
您只能使用标准的HTML/CSS。具体来说，利用CSS中的显示/溢出/高度和HTML中的add/tbody。实施例的CSS：
.scrollableTable tbody {
display: block;
overflow-y: auto;
width: 100%;
height: 50px;
}
.scrollableTable tr {
display: block;
}
.scrollableTable td, .scrollableTable th {
width: 50%;
}
例如HTML：
<table class="scrollableTable">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>Red</td>
</tr>
<tr>
<td>Bananas</td>
<td>Yellow</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
</tr>
</tbody>
</table>
这不起作用。它产生了一个很小的表格，这个表格固定不动，而且列表甚至不能正确排列。 – acmeyer9
糟糕 - 把'tr'代替'td'放在那里。修正了。我可以看到一个更好的方式来使用jQuery来实现这个功能，该功能不会有与adad和tbody不同的列宽，并且可以在浏览器兼容时增强表格。我将把它作为一个单独的解决方案发布。 –
我修改上面通过内特巴尔答案。在之前的答案列中对齐将变得拥塞。
样式表
<style type="text/css">
.scrollableTable thead {
display: block;
//overflow-y: auto;
width: 105%;
height: 25px;
}
.scrollableTable tbody {
display: block;
overflow-y: auto;
width: 105%;
height: 200px;
}
表
<table width="439" border="1" align="center" class="scrollableTable">
<thead>
<tr>
<th width="20">No</th>
<th width="140">Fruit</th>
<th width="131">test</th>
<th width="120">Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apples</td>
<td>ohyoijmnpkjoijikjm;kl</td>
<td>Red</td>
</tr>
<tr>
<td>2</td>
<td>Bananas</td>
<td>ghjghjghj</td>
<td>Yellow</td>
</tr>
<tr>
<td>3</td>
<td>Oranges</td>
<td>hfkjhkjhkhjkl</td>
<td>Orange</td>
</tr>
<tr>
<td>4</td>
<td>fghgfmjhgjhgjhg</td>
<td>hjkhjkgk</td>
<td>fghfg</td>
</tr>
<tr>
<td>5</td>
<td>fghfg</td>
<td>fgjfjfd</td>
<td>gfh</td>
</tr>
<tr>
<td>6</td>
<td>fghfhj</td>
<td>gjdfhgkgfk</td>
<td>ghjgfk</td>
</tr>
<tr>
<td>7</td>
<td>jkgfk</td>
<td>hjfkgfk</td>
<td>hjlklh</td>
</tr>
<tr>
<td>8</td>
<td>hgjfgghjghj</td>
<td>fgjkjhljk</td>
<td>hjkj</td>
</tr>
<tr>
<td>9</td>
<td>jhkjkf</td>
<td>fgjghj</td>
<td>gkhkfjghhgjgh</td>
</tr>
<tr>
<td>10</td>
<td>fkjfhk</td>
<td>hjg</td>
<td>fjkhgk</td>
</tr>
<tr>
<td>11</td>
<td>ghkkh</td>
<td>fghd</td>
<td>ghkgh</td>
</tr>
<tr>
<td>12</td>
<td>kjhjklhgkjgljghjh</td>
<td>hlg</td>
<td>kjghkjhgkj</td>
</tr>
<tr>
<td>13</td>
<td>kgk</td>
<td>d</td>
<td>kkjhgklh</td>
</tr>
<tr>
<td>14</td>
<td>hkjhgkjhklj</td>
<td>hjgk</td>
<td>lhjljhgygyh</td>
</tr>
<tr>
<td>15</td>
<td>ijihgjil</td>
<td>fg</td>
<td>lhjoklh</td>
</tr>
<tr>
<td>16</td>
<td>lohkjl</td>
<td>ghj</td>
<td>lholhuhity</td>
</tr>
<tr>
<td>17</td>
<td>kgjhgikghiu</td>
<td>ghjk</td>
<td>ljhljkyhklj</td>
</tr>
<tr>
<td>18</td>
<td>kgihgik</td>
<td>ghjg</td>
<td>iuhgouygih8</td>
</tr>
<tr>
<td>19</td>
<td>uoiughuiohou</td>
<td>ghkkj</td>
<td>oijhoiyhigouohu</td>
</tr>
<tr>
<td>20</td>
<td>ihnohnjoikjnm</td>
<td>fghfg</td>
<td>ioojhjphiuhiuhohouh</td>
</tr>
</tbody>
</table>
但是，这使用固定宽度，我正在寻找一个解决方案，与一个随窗口页面调整移动的表一起工作。 – acmeyer9
@ user1054494使用一些Dreamweaver，您可以根据需要将固定像素的尺寸更改为某个百分比。 请根据需要选择css，table进行修改。 –
如果您觉得答案可接受，请将其标记为接受 –
jQuery DataTables可能没你在寻找什么，但你看着它？ 数据表文档包含“FixedHeader”的特殊部分，因此您可以查看许多实现。
http://datatables.net/examples/
固定头的例子从文档中一些相关的数据表：
http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html
“下面的例子显示了两个......表都与FixedHeader同时开启。页脚也是固定的...“
http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html
“这个例子显示FixedHeader如何可以制成看起来更像是一个电子表格应用程序。”
这是一个渐进增强的解决方案，应该是跨浏览器兼容，这要归功于jQuery的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var sizeColWidths = function() {
// reset column widths (in case previously set)
$('#fruitTable td, #fruitTable th').css('width', 'auto');
$('#fruitTable').removeClass('scrollableTable');
$('#fruitTable tbody').css('width', 'auto');
// record current column widths
var i=0, colWidth=new Array();
$('#fruitTable th').each(function() {
colWidth[i++] = $(this).outerWidth();
});
// freeze the current column widths
$('#fruitTable tr').each(function() {
var i=0;
$('th, td', this).each(function() {
$(this).css('width', colWidth[i++] + 'px');
})
});
// make the table body scroll (add tbody width for scroll bar)
$('#fruitTable').addClass('scrollableTable');
$('#fruitTable tbody').css('width', ($('#fruitTable thead').width() + 20) +'px');
};
$(document).ready(function() {sizeColWidths()});
$(window).resize(function() {sizeColWidths()});
</script>
<style type="text/css">
.scrollableTable tbody {
display: block;
height:50px;
overflow-y:auto;
}
.scrollableTable tr {
display: block;
}
</style>
</head>
<body>
<table id="fruitTable">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>Red</td>
</tr>
<tr>
<td>Bananas</td>
<td>Yellow</td>
</tr>
<tr>
<td>Grapes</td>
<td>Purple</td>
</tr>
<tr>
<td>Limes</td>
<td>Green</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
</tr>
</tbody>
</table>
</body>
</html>
再次，这是一个固定的表格。它确实适用于固定高度的桌子。如果指定表格的高度和宽度，我可以得到一个固定的表格标题。另一个问题是我的表使用jQuery排序，它需要标题成为表的一部分。如果有固定头文件的解决方案，我愿意改变这一点。谢谢 – acmeyer9
@ user1054494指定你需要第一个.. 而不是把它们放在你的评论编辑你的问题，并解释它u7sing你想要什么你正在尝试..你正在使用哪些代码等.. –