table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed;
原理很简单,有爱研究的童鞋可以去css官网看看说明文档。
直接贴代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转载自·威易网CSS教程</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>
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- 表格table的thead固定,tbody显示滚动条,滚动条不占位
- CSS设置table下tbody滚动条与thead对齐的方法
- 如何用纯CSS固定thead实现表格滚动?tbody设置overflow之密
- table表格中实现tbody部分可滚动,且thead部分固定
- CSS实现表格表头(thead)固定,内容(tbody)滚动
- table表头和首列的表格固定-CSS实现的Table表头固定
- 滚动条下拉时 table 的thead 固定在网页固定在顶部不动
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
- html标签的表格的tbody、tfoot、thead、colgroup、th、tr、td、table
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题
- CSS设置table下tbody的滚动条
- table固定头部,表格tbody可上下左右滑动
- table固定头部,表格tbody可上下左右滑动
- table表头和首列的表格固定-CSS实现的Table表头固定
- css固定table表头的实现代码可同时看到表头和表格底部