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

 

 

 

<!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. 开源FastGithub

    0 前言 github网站访问慢或访问不了,相信很多人都会遇到过,解决方式大概有两种:一种是使用代理访问:另一种是使用ipaddress.com等域名解析网站查询域名的ip,然后在host文件增加ip ...

  2. APP的闪退和无响应

    1.app闪退(crash,崩溃):程序异常退出不再运行 闪退的原因: a.程序内部逻辑错误(因算法或网络连接引起的异常,或是为捕捉到的错误) b.系统自身异常:一般自定ROM或刷机后比较常见 c.运 ...

  3. Centos7 安装 Zabbix Server 4.0

    官方参考URL:https://www.zabbix.com/documentation/4.0/start 1. 安装 Apache 2.4(略) 注意系统时间/时区ntp server是否定时同步 ...

  4. spring boot 并发请求，其他系统接口，丢失request的header信息【多线程、线程池、@Async 】

    场景:一次迭代在灰度环境发版时,测试反馈说我开发的那个功能,查询接口有部分字段数据是空的,后续排查日志,发现日志如下: feign.RetryableException: cannot retry d ...

  5. 听说你还不知道Java代码是怎么运行的？

    作为一名Java程序员,我们需要知道Java代码是怎么运行的.最近复习了深入理解Java虚拟机这本书,做了一下笔记,希望对大家有帮助,如果有不正确的地方,欢迎提出,感激不尽. java 代码运行主要流 ...

  6. 带你认真了解一下Java分布式系统的基本特性

    一般,分布式系统需要支持以下特性: 资源共享 开放性 并发性 可伸缩性 容错性 透明性 下面分别讨论. 容易理解的 资源共享 一旦授权,可以访问环境中的任何资源 资源:包括硬件(e.g. printe ...

  7. 文字识别OCR开源框架的对比--Tesseract vs EasyOCR

    ​ 前言: OCR文字识别在目前有着比较好的应用,也出现了很多的文字识别软件,但软件是面向用户的.对于我们技术人员来说,有时难免需要在计算机视觉任务中加入文字识别,如车牌号识别,票据识别等,因此软件对 ...

  8. 安装VMwareTools

    2.1.挂载VMwareTools镜像

  9. 33、awk命令详解

    33.1.命令介绍: awk不仅仅是linux系统中的一个命令,而且是一种编程语言,可以用来处理数据和生成报告. awk的数据可以是一个或多个文件,可以是来自标准输入,也可以通过管道获取标准输入,aw ...

  10. 5、基本数据类型(str)

    5.1.字符串: 1.n1 = "lc" n2 = 'root' n3 = """chang""" n4='''tom' ...