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: ...
随机推荐
- pytest xfail的使用
@pytest.mark.xfail: 期望测试用例是失败的,但是不会影响测试用例的的执行; 如果测试用例执行失败的则结果是xfail(不会额外显示出错误信息); 如果测试用例执行成功的则结果是xpa ...
- Mysql 面试题（一网打尽，收藏版）
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- C程序从编译到运行
第一篇文章 一.前言 最近在看CSAPP(深入理解计算机系统)然后以前也学过C语言,但是从来没有深究写好的C代码是怎么编译再到执行的. 所以现在自己学习,然后记录下来. 以最常用的hello worl ...
- Java语言实现二维码的生成
众所周知,现在生活中二维码已经是无处不见.走在街道上,随处可见广告标语旁有二维码,手机上QQ,微信加个好友都能通过二维码的方式,我不知道是什么时候兴起的二维码浪潮,但是我知道,这在我小时候可是见不到的 ...
- Arduino参考手册-函数和变量及电路图
标题: Arduino参考手册-函数和变量及电路图 作者: 梦幻之心星 sky-seeker@qq.com 标签: [#Arduino,#参考手册,#函数,#变量] 目录: [Arduino] 日期: ...
- npm ERR! Unexpected end of JSON input while parsing near '...'解决方法
npm install时出现npm err! Unexpected end of JSON input while parsing near'...'错误 输入 npm cache clean -- ...
- kerberos认证协议爱情故事
0x01.kerberos简介 kerberos是一种域内认证协议,Kerberos的标志是三头狗,狗头分别代表以下角色: Client Server KDC(Key Distribution Cen ...
- 17、ansible配置管理
17.1.前言: 1.说明: ansible是自动化运维工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能. ansible是基于模块工作的,本身没有批量部署的能力,真正 ...
- 18、通过yum命令只下载rpm包不安装
18.1.说明: 经常遇到服务器没有网络的情况下部署环境,或者创建自己的 yum 仓库等,这时就需要下载 rpm 包. 18.2.方法一,yumdownloader(推荐): 如果只想通过 yum 下 ...
- 7.7、深入解析openstak工作流程
1.openstack的使用: (1)使用openstack创建的用户默认是default域,角色是user; (2)域-->角色-->用户-->项目 (3)配额在管理员登录后再项目 ...