请问一下这种情况怎么实现

[XiaoYi96]

下面是代码，我想当数据上下滚动的时候，第一个tr永远显示在最顶部
<table width="300" border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
下面还有很多很多。。。。。。
</table>

[XiaoYi96]

引用 2 楼 u013116426 的回复:

可以在table上方弄个div用来显示标题默认隐藏，当你的页面滚动table被挡就显示div并设置样式position: fixed;

可是用了定位之后，加入我的表头很长，X轴滚动条滑动看数据时，表头不会动呀

[Go 旅城通票]

CSS表格固定表头示例

推荐学习资料
easyui开发技巧
Web开发

[jio可]

thead放头部信息，tbody放内容设置一个高度，overflow:auto

[___紫菜]

可以在table上方弄个div用来显示标题默认隐藏，当你的页面滚动table被挡就显示div并设置样式position: fixed;

[jio可]

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
table tbody {
    display: block;
    height: 195px;
    overflow-y: scroll;
}

table thead, tbody tr {
    display: table;
    table-layout:fixed;
}

table {
    width: 300px;
    height: 150px;
}
/*总宽度除以总列数等于列宽300/3=100*/
table tr td,th{
	text-align: center;
	width: 100px;
}
</style>
<table>
	<thead>
		<th>head1</th>
		<th>head2</th>
		<th>head3</th>
	</thead>
	<tbody class='info'></tbody>
</table>
let tr = [];
for(var i = 0; i<10; i++){
	tr.push('<tr><td>'+i+'1</td><td>'+i+'2</td><td>'+i+'3</td></tr>');
}
$('.info').html(tr.join(''));

[XiaoYi96]

引用 3 楼 u012418098 的回复:

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
table tbody {
    display: block;
    height: 195px;
    overflow-y: scroll;
}

table thead, tbody tr {
    display: table;
    table-layout:fixed;
}

table {
    width: 300px;
    height: 150px;
}
/*总宽度除以总列数等于列宽300/3=100*/
table tr td,th{
	text-align: center;
	width: 100px;
}
</style>
<table>
	<thead>
		<th>head1</th>
		<th>head2</th>
		<th>head3</th>
	</thead>
	<tbody class='info'></tbody>
</table>
let tr = [];
for(var i = 0; i<10; i++){
	tr.push('<tr><td>'+i+'1</td><td>'+i+'2</td><td>'+i+'3</td></tr>');
}
$('.info').html(tr.join(''));

谢谢大神，还有个问题请教一下，假设我横向列很多的时候，我怎么样才能让他横向可以滚动那？现在是列宽度自适应