效果图：第一行和第一列固定

 

 

 

<!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样式实现表头和列固定的更多相关文章

  1. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  2. 用css样式围剿等高列问题（转载）

    明修栈道暗度陈仓 该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距.”看完下面的几行代码,再看这句话你真的可以看到圣光! 隐藏容器溢出.将外层容器的溢出设为隐藏: .container { ov ...

  3. html css 如何将表头固定（转）

    html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...

  4. vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

  5. 有关列分组，定义css样式无效的问题

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. 有时候我们要单独对表格的某列定义单独的样式,就会很自然的想到 表格的 在<table>标签内使用的 <co ...

  6. html css 如何将表头固定

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...

  7. easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  8. jquery固定表头和列头

    1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(Ta ...

  9. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

随机推荐

  1. python pyyaml操作yaml配置文件

    在测试工作中,可以使用yaml编写测试用例,执行测试用例时直接获取yaml中的用例数据进行测试(如:接口自动化测试) 1.什么是yaml 是一种可读的数据序列化语言,通常用于配置文件 非常简洁和强大, ...

  2. 【C++】fopen与fopen_s

    说明: VS2010中使用fopen,是没有问题的.使用VS2015时由于VS的高版本对文件操作的安全性有了较高的要求,所以会出现如下情况: fopen用法:  fp = fopen(filename ...

  3. Java课程设计-算术运算测试(D级) 齐鲁工业大学 计科20-1 王瀚垠 202003010033

    Java课程设计-算术运算测试(D级) 齐鲁工业大学 计科20-1 王瀚垠 202003010033 目录 1.项目简介 2.项目采用技术 3.功能需求分析 4.项目亮点 5.项目功能架构图和UML类 ...

  4. Redis不是只有get set那么简单

    我以前还没接触Redis的时候,听到大数据组的小伙伴在讨论Redis,觉得这东西好高端,要是哪天我们组也可以使用下Redis就好了,好长一段时间后,我们项目中终于引入了Redis这个技术,我用了几下, ...

  5. open数据库报错ERROR at line 1: ORA-03113: end-of-file on communication channel Process ID: 3880 Session ID: 125 Serial number: 3

    1.今天打开数据时,失败,报错 ERROR at line 1:ORA-03113: end-of-file on communication channelProcess ID: 3880Sessi ...

  6. Kubernetes自动伸缩pod-HPA

    在运维中,虽然能预先知道负载何时会飙升,或者如果负载的变化是较长时间内逐渐发生的,手动扩容也是可以接受的,但指望靠人工干预来处理突发而不可预测的流量增长,仍然不够理想. 幸运的是,Kubernetes ...

  7. Mongo开启用户认证

      1. 介绍 由于mongodb默认没有设置密码访问,而且mongodb的访问权限设计,必须使用有权限的用户给每个库设置一个用户,才能使用,且2.X版本与3.X版本区别有点大,所以要注意以下几点. ...

  8. Jenkins+SonarQube实现C#代码质量检查

    环境准备 SonarQube 项目创建 jenkins Windows构建节点配置 安装与SonarQube服务端相同版本jdk 安装sonar-scanner 并配置环境变量 安装Visual St ...

  9. 24、dhcp服务搭建

    1.dhcp介绍: DHCP(Dynamic Host Configuration Protocol),动态主机配置协议,DHCP 协议主要是用来自动为局域网中的客户机分配 TCP/IP 信息的网络协 ...

  10. 使用Retrofit上传图片

    Retrofit使用协程发送请求参考文章 :https://www.cnblogs.com/sw-code/p/14451921.html 导入依赖 app的build文件中加入: implement ...