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: ...
随机推荐
- 重新整理 .net core 实践篇—————领域事件[二十九]
前文 前面整理了仓储层,工作单元模式,同时简单介绍了一下mediator. 那么就mediator在看下领域事件启到了什么作用吧. 正文 这里先注册一下MediatR服务: // 注册中间者:Medi ...
- div和img垂直居中的方法
div垂直居中可以使用height和line-height,多个div的话就不适用了. 可以使用下面的方式垂直居中 <div class="parent"> <d ...
- kubernetes源码解析---- apiserver路由构建解析(2)
kubernetes源码解析---- apiserver路由构建解析(2) 上文主要对go-restful这个包进行了简单的介绍,下面我们通过阅读代码来理解apiserver路由的详细构建过程. (k ...
- ES6学习笔记之 this 详解
1.非箭头函数下的 this var obj = { x: 0, f1: function () { console.log(this.x); } } var f1 = obj.f1; var x = ...
- mycat高可用-安全管理-监控 看这一篇就够了
在之前的操作中,我们已经实现了mysql机器的高可用,可以动态切换master,那么如果mycat崩溃了呢?我们应该如何处理呢?所以此时就需要搭建mycat的高可用集群了. 在mycat的权威 ...
- jQuery获取标签信息
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <titl ...
- excel VBA返回选中单元格区域的行数、列数，以及活动单元格的行号和列号
Private Sub Worksheet_SelectionChange(ByVal Target As Range) '可以直接sub(),不然选择就会触发vba Dim rows_coun ...
- 敢为人先，从阿里巴巴云原生团队实践Dapr案例，看分布式应用运行时前景
背景 Dapr是一个由微软主导的云原生开源项目,国内云计算巨头阿里云也积极参与其中,2019年10月首次发布,到今年2月正式发布V1.0版本.在不到一年半的时间内,github star数达到了1.2 ...
- 数据备份[APIO/CTSC 2007]题解
题目描述 你在一家IT公司为大型写字楼或办公楼的计算机数据做备份. 然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏的乐趣. 已知办公楼 ...
- 关于vim
全部删除:按esc后,然后dG全部复制:按esc后,然后ggyG全选高亮显示:按esc后,然后ggvG或者ggVG 在win中使用<C-a>是全选,如果需要在vim中使用<C-a&g ...