table表格中，thead固定不动，tbody内容列表滚动，如何实现？

我自己实现的时候，是给table加：position：relative，tbody加：position：absolute；的然后top：thead中的tr的高度；但是这种方式虽然是实现了thead固定不动，tbody内容列表滚动的功能，但是tbody中的td必须要加width不然缩成一团了，但是可不可以不要给每个td加宽度呢，我觉得这样实现非常有局限性，扩展不太好。各位大神还有没有什么别的好的方法可以不吝啬的给点建议？
（除此之外，网上百度了下那些答案，很多答案的解决办法都是：
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}

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

table thead {
width: calc( 100% - 1em )
}
这种方式，对我目前的这没得作用，我试试了下用display：table；的不知道为什么还是不行
）

目前我给tbody加了绝对定位后是这种内容列表是缩成一团的效果.......

javascript

html5 css html

阅读 8.6k

5 个回答

得票最新

cyyjs

33721220

发布于
2018-02-01

其实很多框架都是把thead和tbody分开了，放在两个table里，然后放在不同的div里做的,然后通过给第二个div设置overflow: auto;position: relative;和高度来实现的。

lisfan

45434

发布于
2018-01-31

其实，你把thead部分换成其标签就可以了，然后滚动区内容就用table。
一般组合型的标签会有很多性质，如果标签本身的语义或者特性影响到实际需求开发的话，建议换个思路，不需要遵循语义

缘自世界

3.5k1412

发布于
2018-02-01

应该给table设置position:relative; overflow-y:scroll, 然后给thead 设置position: absolute; top:0; left:0;最后设置tboby margin-top:xx; 这个高度就是thead的高度。

d_ace

发布于
2018-02-01

更新于
2018-02-01

新手上路，请多包涵

纯css版：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>
<body>

<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>

</body>
</html>