前言

大家一定使用过很多UI，UI都自带的有一些简单的表头固定的功能，但有时候如果我们使用了动态表头数据的话可能会造成数据渲染速度慢影响数据正常显示，因此我们可以用原生table来完成这样的功能

一、表格数据

在这里设置4列数据为固定列，其他的数据就先for循环弄出来。
我们现在有5行数据，每行34列，后30个列为动态生成的数据。

<div class="container"><table><thead><tr><th>序号</th><th>标题1</th><th>标题2</th><th>标题3</th><th v-for="i in 30">{{ i+i+i }}</th></tr></thead><tbody><tr><td>1</td><td>内容1</td><td>内容2</td><td>内容3</td><td v-for="d in 30">{{ d+d+d }}</td></tr><tr><td>2</td><td>内容1</td><td>内容2</td><td>内容3</td><td v-for="d in 30">{{ d+d+d }}</td></tr><tr><td>3</td><td>内容1</td><td>内容2</td><td>内容3</td><td v-for="d in 30">{{ d+d+d }}</td></tr><tr><td>4</td><td>内容1</td><td>内容2</td><td>内容3</td><td v-for="d in 30">{{ d+d+d }}</td></tr><tr><td>5</td><td>内容1</td><td>内容2</td><td>内容3</td><td v-for="d in 30">{{ d+d+d }}</td></tr></tbody></table>
</div>

二、样式设计

1.表格与外层DIV样式

外层DIV限制了表格的宽与高，超出的部分要让其出现滚动条

.container {width: 600px;height: 400px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);overflow: scroll;
}

表格的样式就简单设计一下th和td的宽高字体居中

table{table-layout:fixed;border: none;border-collapse: collapse;background: white;text-align: center;thead{tr{color: white;height: 70px;th{background-color: #CCE8EB;min-width: 100px;position:-webkit-sticky; position:sticky;top:0;z-index: 3;}}}tbody{tr{height: 50px;color: green;td{min-width: 100px;position:-webkit-sticky; position:sticky;}}}}

2.固定表头的样式（重要）

这里我们来设置thead和tbody中tr中th和td的定位，覆盖上面的样式吧

thead{tr{color: white;height: 70px;th{background-color: #CCE8EB;min-width: 100px;position:-webkit-sticky; position:sticky;top:0;z-index: 3;}th:nth-of-type(1) {background-color: #269191;left:0;z-index:4;}th:nth-of-type(2){background-color: #269191;left:100px;z-index:4;}th:nth-of-type(3){background-color: #269191;left:200px;z-index:4;}th:nth-of-type(4){background-color: #269191;left:300px;z-index:4;}}}tbody{tr{height: 50px;color: green;td{min-width: 100px;position:-webkit-sticky; position:sticky;}td:nth-of-type(1){background-color: #CCE8EB;font-weight: bold;left: 0;z-index:3;}td:nth-of-type(2){background-color: #CCE8EB;left: 100px;z-index:3;}td:nth-of-type(3){background-color: #CCE8EB;left: 200px;z-index:3;}td:nth-of-type(4){background-color: #CCE8EB;box-shadow: 5px 5px 5px #0078A855;left: 300px;z-index:3;}}}

position:sticky:针对于滚动框的定位，在你需要定位标签中加入该样式

td:nth-of-type(4)是用来查找第几个td元素，然后里面分别针对right和top固定一下，因为每列width都是100，所以td的left每次都加100，而th的top一直都需要为0

看一下结果，向下移动后

向右移动后

总结

样式大家可以随意设置，虽然这个表头固定没什么用，但是在数据量过大时还是可以了解一下子的

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定相关推荐

Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
纯css样式使table表格自适应手机和pc
最近做工作流,需要手机端自适应原先pc端的表格.使用纯css样式即可做到,那么下边跟随小编一起来看看吧! pc端上展示的table表格样式如下: 如果手机端想显示相同的table内容但是用此格式的话会 ...
bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...
HTML5 混合APP开发学习笔记（三）——CSS样式设计
CSS样式设计 CSS高级特性继承性书写CSS样式时,子标签会自动继承父标签的某些样式,恰当地使用继承这个特性可以简化代码,降低CSS样式的复杂性以下CSS样式不能被继承: 边框属性边距和填充 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
vue中使用hover.css动画
vue中使用hover.css动画介绍:一组 CSS3 驱动的悬停效果,可应用于链接.按钮.徽标.SVG.特色图像等.轻松应用于您自己的元素.修改或仅用于灵感.在 CSS.Sass 和 LESS 中 ...
设计网页字体css,CSS样式设计网页字体与用户体验
CSS样式设计网页字体与用户体验互联网发布时间:2009-04-02 19:36:06 作者:佚名我要评论网页制作Webjx文章简介:在设计网页时,没有比页面的外观更重要的了.所以 ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定

在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定

前言

一、表格数据

二、样式设计

1.表格与外层DIV样式

2.固定表头的样式（重要）

总结

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定相关推荐

最新文章

热门文章