今天在写公司项目的时候，遇到了一个比较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. 效果
嫌滚动条丑的，可以参考这篇文章修改浏览器默认滚动条
