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

 

 

 

<!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. 【NX二次开发】Block UI 指定轴

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  2. 【CMD】修改文件夹的属性

    将 d:\文件夹 添加 只读 属性: attrib +r d:\文件夹 /d 将 d:\文件夹 去掉 只读 属性: attrib -r d:\文件夹 /d 其他属性可以参考帮助文件:

  3. centos 7 iotop 安装

    安装指令:yum -y install iotop 指定查看aubunt 用户的读写状态:iotop -u aubunt -P -k -t 允许在非交互模式下每隔3秒刷新一次,只刷新6次:iotop ...

  4. Paxos 图解 (秒懂)

    文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...

  5. 从1+1=2来理解Java字节码从1+1=2来理解Java字节码

    编译"1+1"代码 首先我们需要写个简单的小程序,1+1的程序,学习就要从最简单的1+1开始,代码如下: 写好java类文件后,首先执行命令javac TestJava.java ...

  6. MindSpore自定义模型损失函数

    技术背景 损失函数是机器学习中直接决定训练结果好坏的一个模块,该函数用于定义计算出来的结果或者是神经网络给出的推测结论与正确结果的偏差程度,偏差的越多,就表明对应的参数越差.而损失函数的另一个重要性在 ...

  7. Netty 框架学习 —— 编解码器框架

    编解码器 每个网络应用程序都必须定义如何解析在两个节点之间来回传输的原始字节,以及如何将其和目标应用程序的数据格式做相互转换.这种转换逻辑由编解码器处理,编解码器由编码器和解码器组成,它们每种都可以将 ...

  8. Java安全之反序列化回显与内存马

    Java安全之反序列化回显与内存马 0x00 前言 按照我个人的理解来说其实只要能拿到Request 和 Response对象即可进行回显的构造,当然这也是众多方式的一种.也是目前用的较多的方式.比如 ...

  9. Gitlab触发jenkins并获取项目post参数

    jenkins -- Generic Webhook Trigger插件 此插件是git webhook的高阶应用,安装后会暴露出来一个公共API,GWT插件接收到 JSON 或 XML 的 HTTP ...

  10. 12、elk的使用(1)

    12.0.架构图: 服务器名称 ip地址 controller-node1(主) 172.16.1.90 slave-node1(从) 172.16.1.91 12.1.elk介绍: (1)ELK是三 ...