写个thead固定顶部 tbody 上下滚动的示例页面
1写个thead固定顶部 tbody 上下滚动的示例页面
以下是一个thead固定顶部tbody上下滚动的示例页面,使用jQuery和CSS来实现:

HTML部分:
```



















































Name Age City
John 25 New York
Jane 30 Los Angeles
Bob 40 Chicago
Sarah 35 Houston
Tom 28 Miami
Emily 27 Seattle
Mike 32 San Francisco
Mary 29 Boston


```

CSS部分:
```
.wrapper {
height: 200px;
overflow-y: scroll;
}

table {
width: 100%;
border-collapse: collapse;
}

thead {
display: table;
width: 100%;
table-layout: fixed;
background-color: #fff;
position: sticky;
top: 0;
z-index: 1;
}

th {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ccc;
}

tbody {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

tbody tr {
border-bottom: 1px solid #ccc;
}

tbody td {
padding: 10px;
}
```

JavaScript部分:
```
$(document).ready(function() {
var $table = $('table');
var $thead = $table.find('thead');
var $tbody = $table.find('tbody');
var $firstTd = $tbody.find('tr:first-child td:first-child');
var thWidths = [];

// 获取每个th的宽度
$thead.find('th').each(function(i, th) {
thWidths[i] = $(th).outerWidth();
});

// 设置每个td和th的宽度
$firstTd.css('width', thWidths[0] + 'px');
$thead.find('th').each(function(i, th) {
$(th).css('width', thWidths[i] + 'px');
});

// 当滚动条滚动时,调整thead的位置和宽度
$table.on('scroll', function() {
var tableOffsetTop = $table.offset().top;
var tableOffsetBottom = tableOffsetTop + $table.outerHeight();
var tableScrollTop = $table.scrollTop();
var theadOffsetTop = $thead.offset().top - tableOffsetTop;
var theadOffsetBottom = theadOffsetTop + $thead.outerHeight();

if (tableScrollTop > theadOffsetTop || tableScrollTop < theadOffsetTop) {
$thead.css('top', tableScrollTop + 'px');
}

if (theadOffsetBottom > $tbody.outerHeight()) {
$thead.css('width', (tableScrollTop + $tbody.outerHeight() - theadOffsetTop) + 'px');
} else {
$thead.css('width', '100%');
}
});
});
```

这个示例页面可以在固定的thead中嵌入大量的数据,如果页面根据数据数量而变得较长时,tbody将会自动滚动,而thead将保持在页面的顶部,这使得用户可以轻松查看和比较数据。
本页由《梦行文档》生成

 

name完成
30