小智 18
您可以使用Lobstrosity的代码稍加修改:position: fixed而不是absolute.
position: fixed现在被包括IE8在内的所有浏览器广泛采用.BTW固定在移动/平板电脑设备上的效果要好得多position: absolute.
我发现在每个列的动态宽度的表上,绝对定位的<thead>会丢失其余列的宽度,所以为了解决这个问题,我想出了以下代码:
这段代码的作用如下:
通过查找第一个<tbody> <tr> <td>行的CSS宽度并将其存储在数组中以供日后使用,确定表中每列的宽度.当用户滚动类时,'fixed'被添加到<thead>(默认浏览器行为将改变<th>的宽度,并且它们将与<tbody>不匹配.所以为了解决这个问题我们追溯将<th>的宽度设置为我们之前读过的值.
无论如何这里是代码:
CSS
table.entries {width: 100%;border-spacing: 0px;margin:0;}
table.entries thead.fixed {position:fixed;top:0;}
HTML
<table class="entries" id="entriestable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Location</th>
<th>DOB</th>
<th>Opt in</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">Ricky Bobby</td>
<td>ricky.bobby@email.com</td>
<td class="addy"><i>Kent, GB</i></td>
<td class="dob">20/08/1984</td>
<td>Yes</td>
<td class="date">4 hours ago</td>
</tr>
</tbody>
</table>
JavaScript的
TableThing = function(params) {
settings = {
table: $('#entriestable'),
thead: []
};
this.fixThead = function() {
// empty our array to begin with
settings.thead = [];
// loop over the first row of td's in <tbody> and get the widths of individual <td>'s
$('tbody tr:eq(1) td', settings.table).each( function(i,v){
settings.thead.push($(v).width());
});
// now loop over our array setting the widths we've got to the <th>'s
for(i=0;i<settings.thead.length;i++) {
$('thead th:eq('+i+')', settings.table).width(settings.thead[i]);
}
// here we attach to the scroll, adding the class 'fixed' to the <thead>
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop > settings.table.offset().top) {
$("thead", settings.table).addClass("fixed");
}
else {
$("thead", settings.table).removeClass("fixed");
}
});
}
}
$(function(){
var table = new TableThing();
table.fixThead();
$(window).resize(function(){
table.fixThead();
});
});
这里有一些可行的东西（在 FF 3.5、Chrome 3 和 IE 8 中快速测试过），您可以根据自己的需求进行定制。
它使用 的绝对定位thead。当thead变得绝对定位时，这基本上将其从 的原始流中移除table，并且所有 s 的宽度tbody td都会相应调整。因此，如果您不指定列宽或者任何列的标题比该列中的任何其他单元格宽，则会出现丑陋的行为。
CSS
#Grid thead.Fixed
{
position: absolute;
}
超文本标记语言
<table id="Grid">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- etc. -->
</tbody>
</table>
jQuery
$(function() {
var table = $("#Grid");
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop > table.offset().top) {
$("thead", table).addClass("Fixed").css("top", windowTop);
}
else {
$("thead", table).removeClass("Fixed");
}
});
});
我注意到它在 IE 中不起作用，除非您指定严格的 XHTML 文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<!-- etc. -->
| 归档时间： |
|
| 查看次数： |
29168 次 |
| 最近记录： |