vue里面原生的table表格纯css固定头部与左侧第一列

最新推荐文章于 2024-03-28 16:04:47 发布
最新推荐文章于 2024-03-28 16:04:47 发布
阅读量1.3k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37130872/article/details/120285735
版权

css vue.js html5 
<!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>

夹道欢呼
关注
vue 结合原生tabe 渲染表格 实现 固定头部、固定右侧、单选按钮、单元格拖拽监听位置
.
06-22 996
1.vue 结合原生tabe 渲染表格 实现 固定头部、固定右侧、单选按钮(避免el-table 数据量大卡顿) // table.vue <template> <div id="oldTable" v-if="headerData.length && tableData.length"> <div class="table-scroll-mod" :style="{height: height+ 'px'}">
el table 固定表头和首行_vue表格实现固定表头首列
weixin_42509267的博客
01-13 1372
前言最近在做vue移动端项目，需要做一个可以固定表头首列的表格，而且由于一些原因不能使用任何UI插件，网上找了很久也没什么好方法，所以在解决了问题之后，写下了这篇文章供后来人参考，文章有什么错漏的问题欢迎评论交流。效果思路要实现固定首行首列除了使用各种UI框架插件外，那就是自己用原生写啦首先我们理一下思路如何固定首行首列呢？可能每个人有不同的想法我这里当然介绍的是我自己的想法那就是把首列表头和表格...
左侧是表头的表格
06-03
1、左侧是表头的表格数据展现， 2、支持多行，多表头 3、固定表头的功能 4、能够支持标题 5、获取表格中的数据 6、支持IE/CHROME
vue实现表格表头在左侧，并且固定表头
最新发布
m0_61480985的博客
03-28 1452
前段时间一个h5端的项目，需要实现一个表格，然后表格的表头放在左侧一列，并且左右滚动的时候需要固定表头，不能随着滚动条滚动一起动。但是在网上找了很多类似的，思路是可以的，就是没有一个是我能运行起来的，最后就决定自己写一个。
vue 折叠面板,列表固定表头固定左侧
学习笔记666
03-20 862
#调用。
基于vue的表格，实现基础的固定的表头，固定左侧列
cscscssjsp的博客
04-10 4394
先有主表格，在主表格基础上通过css样式控制实现效果，目前只能固定最左侧一列，或者从左侧开始多列 没有实现右侧固定，懒得做，固定的列填入fiexd,目前需要同时在表头和表体传入，最好是上下相同，以后再优化只在表头传值， 共三个表格，以下代码为源码，复用时请注明出处 1、html代码 <template> <div class="table_box" :style="...
JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】
charlatans的博客
08-12 3802
本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中。实现逻辑：表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚动事件进行绑定，让表头和列头显示对应的内容就完成了滚动的操作】下面有Vue组件的和JavaScript原生的代码，可以直接运行查看逻辑和效果。.........
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
在Vue.js应用中，开发一个具有滚动功能的表格并保持表头与列对齐是一项常见的需求。当表格列的宽度不同时，这个问题变得更加复杂。本文将详细介绍如何在Vue中实现这个功能，主要涉及以下几个关键点： 1. **监听滚动...
vue 原生table表格表头固定
09-07
Vue原生的table表格表头固定，可以通过CSS的position属性和JS的scroll事件来实现。 首先，在table标签外面嵌套一个div容器，设置其样式为position: relative，用于容纳表格和表头。 然后，在表格表头的tr标签上...
【css】纯css实现table表格固定表头，表内容滚动
hello world_
05-15 1万+
今天在写公司项目的时候，遇到了一个比较xx的问题，现公司的项目使用的是 vue2.0 和 element-ui 搭建的。 那么提到 element-ui 大家都知道，他最实用的一个组件就是表格了，简直是后台管理项目必备选项。 但是现公司的产品和 UI 简直丧心病狂，非让我自己用原生标签DIY，那没办法，只好 coding 了。 但是 coding 的过程中，有个需求是要表头固定，表内容超出滚...
vue项目中table表格固定表头和首尾列
梨城毒妃的博客
10-22 1万+
在html中实现table表格固定表头和首尾列的方法和文章很多，本文就不再赘述。 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列 情景一：vue+element 只要在el-table元素中定义了height属性，即可实现固定表头的表格 通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。 固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。 <template&
vue表格实现固定表头首列
ICode联盟
10-14 420
vue表格实现固定表头首列。
element-ui的Table表格变成左右结构，表头在最左边
cainiaoxuexi666的博客
10-23 4288
在TableColumn的render方法中，使用v-show将表头内容隐藏。然后在最左侧添加一个固定宽度的单元格，作为表头的占位符。在table的外层容器上，设置display:flex，将其子元素水平排列，并使用flex:1将表格和表头分别占据左右两个区域。element-ui的表头是由TableColumn组件构成的，可以通过自定义该组件的render方法来调整表头的位置。1. 使用CSS将表格的布局变为左右结构。2. 将表头移动到最左边。
vue封装表格组件，左边固定列右边滑动，可排序可操作
qq_33235582的博客
11-08 4690
如标题，效果如下图： 我做的是移动端，表格太长，所以做左边固定列右边滑动，上图右边显示动态箭头是让用户知道表格可以滑动。 表格的思路： 写两个table 一个是整体的table，外面的div保持宽度固定，内部的table宽度大于外部才能滚动； 一个是左边固定列，这个固定position:absolute在左边，就是盖在大table上面； 代码如下： <template> <div> <div class="product-li...
Vue多种方法实现表头、首列固定
热门推荐
Clyde Kuo
12-19 3万+
有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定， 上效果： 一、创建多个表格进行覆盖 思路：当页面滚动到临界值时，出现固定表头、首列 先创建一个活动表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
el-table表头竖向排在第一列
weixin_44037158的博客
03-27 626
在这个示例中，我们使用了计算属性 verticalHeaders 来确定哪些表头需要竖向展示。然后在 el-table-column 组件中根据计算属性的值来设置是否需要应用 vertical-header 样式类来实现竖向展示。在 Element UI 的 el-table 组件中，默认情况下，表头是水平展示的。如果你想要将第一列的表头设置为竖向展示，可以通过一些自定义的 CSS 样式来实现。
vue表格实现固定表头和首列
学习笔记666
09-10 4765
前言 前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，抄个什么劲？有意义？？？ 没办法，只有自己写一个了。 效果图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值