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

 

 

 

<!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. 用MAILX 发送邮件

    使用 25 端口发送 mail 编辑/etc/mail.rc 文件,添加以下信息vi /etc/mail.rc set from=xxx@163.com smtp=smtp.163.comset sm ...

  2. 实验1、初入Flask

    实验介绍 1. 实验内容 Flask是一个用Python编写的Web应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask.Flask基于Werk ...

  3. 把axios获取到的数据渲染到列表上，使用better-scroll实现列表左右滑动

    问题:axios数据请求完后,页面是有数据的,即页面看到有数据,但是better-scroll却无法滚动 原因:这是因为在数据更新前,better-scroll已经渲染完成了 解决方法:这是个异步问题 ...

  4. sqlsever 创建一个通用分页查询

    -- Author: Mis Chen-- Create date: 2018年5月15日 11:21:47-- Description: 创建一个通用分页查询-- ================= ...

  5. 【Azure 事件中心】在Service Bus Explorer工具种查看到EventHub数据在分区中的各种属性问题

    问题描述 通过Service Bus Explorer工具,查看到Event Hub的属性值,从而产生的问题及讨论: Size in Bytes:   这个是表示当前分区可以存储的最大字节数吗? La ...

  6. 制作 Cocoapods 库

    一.准备工作:注册 trunk 1.更新 cocoapods 至最新版本 2.申请注册 trunk pod trunk register email 'name' 3.进入邮箱,点击激活注册 4.验证 ...

  7. @Autowired报错原因分析和4种解决方案！

    上图的报错信息相信大部分程序员都遇到过,奇怪的是虽然代码报错,但丝毫不影响程序的正常执行,也就是虽然编译器 IDEA 报错,但程序却能正常的执行,那这其中的原因又是为何? ​ 报错原因分析 报错的原因 ...

  8. 区分DDD中的Domain, Subdomain, Bounded Context, Problem/Solution Space

    区分DDD中的Domain, Subdomain, Bounded Context, Problem/Solution Space 译自: Domain, Subdomain, Bounded Con ...

  9. 4、saltstack的使用

    官方文档地址:http://repo.saltstack.com/#rhel 4.1.saltstatck介绍: 用户要一致,这里使用的是root用户: 用于批量管理成百上千的服务器: 并行的分发,使 ...

  10. 如何跟领导解释为什么选择SpringCloud alibaba作为微服务开发框架

    什么是微服务 提到微服务不得不提Martin Fowler在2014年3月25日发表的文章 Microservices,里面给出了微服务的定义.后续国内所有关于微服务的介绍都是基于这篇文章的翻译,或加 ...