怎么实现html表头固定，表格内的信息向上滚动
如图，内容向上自动滚动
多谢啦,在网上找到一个例子，参照着写了，
例子中的图片
我改了一下，基本可以使用，实现内容无缝向上滚动,因为是下载的代码，
找不到例子的网页了,后面我会写一个Demo放上来
我的实现思路是2个table，一个只显示thead，一个只显示tbody，显示tbody的table外面再套一个div，使它能出滚动条。另外column的宽度通过js来计算，确保上下2个table的column width一致。
代码仅供参考，当时项目紧临时想到的应对之策，应该还有更加优雅的实现，我这里抛砖引玉一下。
<div>
<table id="tableHeader" class="table table-hover table-bordered table-striped" >
<thead>
<tr>
<th style="width:70%">{{'HEADER_TABLE_NAME' | translate}}
<img src="resources/images/sortIcon/sort_both.png" ng-click="sort=true;predicate ='displayName';reverse=true;" ng-show="!sort"/>
<img src="resources/images/sortIcon/sort_asc.png" ng-click="predicate ='displayName';reverse=true" ng-show="sort&&!reverse"/>
<img src="resources/images/sortIcon/sort_desc.png" ng-click="predicate ='displayName';reverse=false" ng-show="sort&&reverse"/>
</th>
<th style="width:30%">{{'HEADER_VERSION' | translate}}</th>
</tr>
</thead>
</table>
</div>
<div style="overflow-y:visible; overflow-x:hidden">
<table ng-resize class="table table-hover table-bordered table-striped" style="width:100%">
<tbody>
<tr ng-repeat="table in tables | searchFilter:searchText | orderBy:predicate:reverse" draggable="true" ng-drag drag-data="selectedVersion">
<td style="width:70%" ng-click="tableVersionChangedHandler(selectedVersion)">{{table.displayName}}</td>
<td style="width:30%;height:24px">
<select ng-show="table.versions" ng-init="selectedVersion = table.versions[0]" ng-change="tableVersionChangedHandler(selectedVersion)" ng-model="selectedVersion" ng-options="item.version for item in table.versions">
</select>
</td>
</tr>
</tbody>
</table>
</div>不好意思，刚才的答案我理解有误，这次应该能帮助到你
参考来源
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<style type="text/css">
.table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
.fixedThead{
display: block;
width: 100%;
}
.scrollTbody{
display: block;
height: 262px;
overflow: auto;
width: 100%;
}
.table td,.table th {
width: 200px;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
.table tr{
border-left: 1px solid #EB8;
border-bottom: 1px solid #B74;
}
thead.fixedThead tr th:last-child {
color:#FF0000;
width: 218px;
}
</style>
</head>
<body >
<table class="table">
<thead class="fixedThead">
<tr><th>header</th><th>header two</th></tr>
</thead>
<tbody class="scrollTbody">
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
</tbody>
</table>
</body>
</html>