CSS样式实现表头和列固定
效果图：第一行和第一列固定
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CSS实现表头与列固定</title>
<!--引用vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.main{
width:1000px;
overflow:auto;
height:625px;
}
td,th{
border:1px solid gray;
width:100px;
height:30px;
}
th{
background-color:lightblue;
}
table{
table-layout:fixed;
width:2000px;
}
td:first-child,th:first-child{
position:sticky;
left:0;
z-index:1;
background-color:lightpink;
}
thead tr th{
position:sticky;
top:0;
}
th:first-child{
z-index:2;
background-color:lightblue;
}
</style>
</head>
<body>
<!--新建Vue实例-->
<div id="app">
<div class="main">
<table cellspacing="0">
<thead>
<tr>
<th>{{message}}</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
<th>标题6</th>
<th>标题7</th>
<th>标题8</th>
<th>标题9</th>
<th>标题10</th>
<th>标题11</th>
<th>标题12</th>
<th>标题13</th>
<th>标题14</th>
<th>标题15</th>
</tr>
</thead>
<tbody>
<!--vue的 v-for的遍历-->
<tr v-for="(item,index) in 50" :key="index">
<td>demo1</td>
<td>demo2</td>
<td>demo3</td>
<td>demo4</td>
<td>demo5</td>
<td>demo6</td>
<td>demo7</td>
<td>demo8</td>
<td>demo9</td>
<td>demo10</td>
<td>demo11</td>
<td>demo12</td>
<td>demo13</td>
<td>demo14</td>
<td>demo15</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<!--把<div id="app></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象， 这个对象就是app-->
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello'
},
methods:{
clickButton:function(){
this.my_data = "Wow! I'm changed!"
}
}
})
</script>
</html>
CSS样式介绍：
1、overflow 属性规定当内容溢出元素框时发生的事情。
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 案例：
.main{
width:1000px;
overflow:auto;
height:625px;
} 2、table-layout:fixed;
值 描述
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。 案例：
table{
table-layout:fixed;
width:2000px;
} 3、position 属性指定了元素的定位类型
static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
relative：相对定位元素的定位是相对其正常位置。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，
如果元素没有已定位的父元素，那么它的位置相对于<html>: sticky：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
z-index属性：指定了一个元素的堆叠顺序。一个元素可以有正数或负数的堆叠顺序 案例：
td:first-child,th:first-child{
position:sticky;
left:0;
z-index:1;
background-color:lightpink;
}
4、语法：box-shadow: h-shadow v-shadow blur spread color inset;
值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
案例：
.table-responsive .o_list_table thead tr:nth-child(1) th:nth-child(<t t-esc="offset_index+1"/>) {
box-shadow: -1px 0px 0 #ddd inset;
}
CSS样式实现表头和列固定的更多相关文章
- asp.net table表格表头及列固定实现
http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...
- 用css样式围剿等高列问题（转载）
明修栈道暗度陈仓 该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距.”看完下面的几行代码,再看这句话你真的可以看到圣光! 隐藏容器溢出.将外层容器的溢出设为隐藏: .container { ov ...
- html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- 有关列分组，定义css样式无效的问题
声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. 有时候我们要单独对表格的某列定义单独的样式,就会很自然的想到 表格的 在<table>标签内使用的 <co ...
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
- easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
- jquery固定表头和列头
1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(Ta ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
随机推荐
- UF_VIEW 视图操作
Open C uc6400uc6401uc6402uc6403uc6404uc6405uc6406uc6408uc6409uc6430uc6431uc6432uc6433 获得视图3×3矩阵uc ...
- Dynamic Anchor Learning for Arbitrary-Oriented Object Detection（DAL)
面向任意目标检测的动态锚点学习 摘要:面向任意的目标广泛地出现在自然场景.航空照片.遥感图像等中,因此面向任意的目标检测得到了广泛的关注.目前许多旋转探测器使用大量不同方向的锚点来实现与地面真实框的空 ...
- 十亿级流量下，我与Redis时延小突刺的战斗史
一.背景 某一日收到上游调用方的反馈,提供的某一个Dubbo接口,每天在固定的时间点被短时间熔断,抛出的异常信息为提供方dubbo线程池被耗尽.当前dubbo接口日请求量18亿次,报错请求94W/天, ...
- Oracle不知道用户密码情况下，如何在不更改密码的前提下解锁用户或者延期密码有效期
1.问题描述: 生产环境,zabbix告警业务用户密码即将过期,但是如何不知道业务用户密码的情况下来解决该问题? 2.实验一: 1)创建新的用户test,并授予test resource角色和conn ...
- Java知识复习（四）
最近准备跳槽,又要好好复习基本知识了.过了个年,前面刚接触的springboot也只能先放放了.就先把自己复习了哪些罗列出来吧. Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用== ...
- 关于 Windows 下 Qt 开发，这个问题必须要搞清楚！
小伙伴们,大家好,小北师兄又来喂饭啦,从上次写完<一个例子让你秒懂 Qt Creator 编译原理>后,师兄对于 Qt 的一些环境配置有了更深的理解,这对师兄进行 Qt 的后续学习起到了很 ...
- js笔记4
1.js数据类型分析 (1)基础类型:string.number.boolean.null.undefined (2)引用类型:object-->json.array... 2.点运算 xxx ...
- ShardingSphere 看这一篇就够了
1.什么是shardingSphere Apache ShardingSphere 是一套开源的分布式数据库中间件解决方案组成的生态圈,它由 JDBC.Proxy 和 Sidecar(规划中)这 ...
- ASP.Net Core Configuration 理解与源码分析
Configuration 在ASP.NET Core开发过程中起着很重要的作用,这篇博客主要是理解configuration的来源,以及各种不同类型的configuration source是如何被 ...
- 2.QT浏览器控件设置“透明颜色”
使用样式表或者设置背景颜色,使用 background-color:transparent 但,使用透明的颜色是不可行的: QColor(255,0,0,0)