纯css实现table表格固定表头，表内容滚动
程序员文章站
2022-06-02 11:29:48
...
今天在写公司项目的时候，遇到了一个比较xx的问题，现公司的项目使用的是 vue2.0 和 element-ui 搭建的。
那么提到 element-ui 大家都知道，他最实用的一个组件就是表格了，简直是后台管理项目必备选项。
但是现公司的产品和 UI 简直丧心病狂，非让我自己用原生标签DIY，那没办法，只好 coding 了。
但是 coding 的过程中，有个需求是要表头固定，表内容超出滚动的。因为习惯了使用，结果把该有的基础忘得差不多了。。。
下面就是完成需求后，自己写个 demo 记录下，方便下次遇坑解决。
1. 主要两段代码
-
.conatiner table thead,tbody,tr,th,td {
-
display: inline-block;
-
}
-
.container table tbody {
-
width: 100%;
-
max-height: 260px;
-
overflow-y: auto;
-
}
主要就是修改表格的整体属性，然后给 tbody 限制高度，溢出显示滚动条
2. 完整代码
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<title>固定表头，表内容滚动Demo</title>
-
</head>
-
<style>
-
.container {
-
width: 500px;
-
height: 300px;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
transform: translate(-50%, -50%);
-
background-color: #2C3A5B;
-
}
-
-
.container table {
-
color: #E6E6E6;
-
font-size: 14px;
-
width: 100%;
-
}
-
-
.conatiner table thead,tbody,tr,th,td {
-
display: inline-block;
-
}
-
-
.container table thead {
-
width: 100%;
-
height: 40px;
-
line-height: 40px;
-
}
-
-
.container table thead tr {
-
width: 100%;
-
border-bottom: 1px solid #CCC;
-
box-sizing: border-box;
-
}
-
-
.container table thead tr th:nth-of-type(1) {
-
width: 100px;
-
}
-
-
.container table thead tr th:nth-of-type(2) {
-
width: 100px;
-
}
-
-
.container table thead tr th:nth-of-type(3) {
-
width: auto;
-
}
-
-
.container table tbody {
-
width: 100%;
-
max-height: 260px;
-
overflow-y: auto;
-
}
-
-
.container table tbody tr {
-
width: 100%;
-
line-height: 40px;
-
border-bottom: 1px solid #CCCCCC;
-
box-sizing: border-box;
-
}
-
-
.container table tbody tr:nth-last-of-type(1) {
-
border-bottom: none;
-
}
-
-
.container table tbody tr td {
-
text-align: center;
-
}
-
-
.container table tbody tr td:nth-of-type(1) {
-
width: 100px;
-
}
-
-
.container table tbody tr td:nth-of-type(2) {
-
width: 100px;
-
}
-
-
.container table tbody tr td:nth-of-type(3) {
-
width: auto;
-
}
-
</style>
-
-
<body>
-
<div class="container">
-
<table cellspacing="0" cellspacing="0">
-
<thead>
-
<tr>
-
<th>序号</th>
-
<th>名称</th>
-
<th>地址</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>1</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
<tr>
-
<td>2</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
<tr>
-
<td>3</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
<tr>
-
<td>4</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
<tr>
-
<td>5</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
<tr>
-
<td>6</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
<tr>
-
<td>7</td>
-
<td>张三</td>
-
<td>上海市普陀区金沙江路 1518 弄</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
</body>
-
-
</html>
3. 效果
嫌滚动条丑的，可以参考这篇文章 修改浏览器默认滚动条
上一篇： Spring如何解决循环依赖问题
下一篇： php自动跳转中英文页面_PHP
推荐阅读
-
JS实现table表格固定表头且表头随横向滚动而滚动
-
JS实现table表格固定表头且表头随横向滚动而滚动详解
-
JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
-
JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
-
固定表头和第一列、内容可滚动的table表格
-
纯css实现table表格固定表头，表内容滚动
-
CSS实现表头固定的可滚动表格的浏览器兼容问题_html/css_WEB-ITnose
-
CSS实现表头固定的可滚动表格的浏览器兼容问题_html/css_WEB-ITnose
-
纯css实现table固定列与表头中间横向滚动实例讲解
-
JS实现table表格固定表头且表头随横向滚动而滚动详解