鍍金池/ 問答/HTML5  HTML/ table表格中，thead固定不動，tbody內(nèi)容列表滾動，如何實現(xiàn)？

table表格中，thead固定不動，tbody內(nèi)容列表滾動，如何實現(xiàn)？

我自己實現(xiàn)的時候，是給table加：position：relative，tbody加：position：absolute；的然后top：thead中的tr的高度；但是這種方式雖然是實現(xiàn)了thead固定不動，tbody內(nèi)容列表滾動的功能，但是tbody中的td必須要加width不然縮成一團了，但是可不可以不要給每個td加寬度呢，我覺得這樣實現(xiàn)非常有局限性，擴展不太好。各位大神還有沒有什么別的好的方法可以不吝嗇的給點建議？
（除此之外，網(wǎng)上百度了下那些答案，很多答案的解決辦法都是：
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加了絕對定位后是這種內(nèi)容列表是縮成一團的效果.......
clipboard.png

回答
編輯回答
編輯回答
陪妳哭

其實很多框架都是把thead和tbody分開了，放在兩個table里，然后放在不同的div里做的,然后通過給第二個div設置overflow: auto;position: relative;和高度來實現(xiàn)的。

2017年6月6日 00:37
編輯回答
撿肥皂

其實，你把thead部分換成其標簽就可以了，然后滾動區(qū)內(nèi)容就用table。
一般組合型的標簽會有很多性質(zhì)，如果標簽本身的語義或者特性影響到實際需求開發(fā)的話，建議換個思路，不需要遵循語義

2017年10月21日 17:08
編輯回答
款爺

應該給table設置position:relative; overflow-y:scroll, 然后給thead 設置position: absolute; top:0; left:0;最后設置tboby margin-top:xx; 這個高度就是thead的高度。

2017年8月6日 23:15
編輯回答
失魂人

純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>瀏陽河就業(yè)</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>
2018年9月14日 14:23