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

HTML部分：
```

```

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将保持在页面的顶部，这使得用户可以轻松查看和比较数据。