精华内容
下载资源
问答
  • 如何固定表格第二列
    2021-06-20 01:35:39

    我期望中间列的宽度是左右两列的3倍。 200(从左到右)的宽度看起来好像按照200,200,600的顺序指定宽度,而不是按照200,600,200的规定出现。换句话说,最后一列的宽度是前两个宽度的3倍。带固定列的简单HTML表格

    为什么? (这是我的主要问题)

    Left
    1 2 3

    另外,下面的非表方法有什么优点吗? (这是一个已经回答了二次问题)

    Left
    Left
    RIght
    Page Content

    CSS:

    #left_col {

    width: 200px;

    margin:0px;

    float: left;

    }

    #page_content {

    margin-left: 200px;

    margin-right: 200px;

    width: 600px;

    }

    #right_col

    {

    width: 200px;

    float: right;

    }

    2010-02-16

    ChadD

    +3

    'div'与'table'的优点取决于数据/使用情况。如果数据是表格,那么使用'table',如果只是用于布局,则使用'div'方法。但最终归结为目的和偏好。 –

    2010-02-16 02:23:08

    +1

    如果删除第一个(空)'colgroup',表格是否按预期显示? –

    2010-02-16 02:52:36

    更多相关内容
  • vue移动端项目 一个可以固定表头首表格 ,没有使用UI插件。 感兴趣的朋友可以参考下,希望对大家有所帮助
  • Android可固定表头和自定义表格,集成简单。 API使用说明: LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定 ...
  • 中国省市表格(第一是省份,第二列是市)
  • 实现表格第列固定

    千次阅读 2018-05-21 11:51:30
    固定表格,其余可以左右滑动。这样的需求往往出现在移动端的表格显示。 (2) 难点 这个功能的难点在于:如果把表格中抽出,行无法对齐。 (3) 已有解决方案 网上有很多解决方案: 固定...

    背景

    (1) 需求

    固定表格的第一列,其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。

    (2) 难点

    这个功能的难点在于:如果把第一列从表格中抽出,行无法对齐。

    (3) 已有解决方案

    网上有很多解决方案:

    • 固定表格高度,只能显示一列。将第一列抽出固定在最左。
    • js动态计算各高度

    对于这些方案要不过于繁琐复杂,要不单行显示不利于用户体验。

    实现

    对于这样的问题,我希望用最简单的方式去解决,避免过多的性能消耗,也更利于维护。

    (1) 实现思路

    渲染两个表格,其中一个绝对定位覆盖在另外一个表格上并隐藏非第一列。

    (2) 缺点

    表格html内容渲染了两次。

    (3) demo

    这里写图片描述

    table{border-bottom: solid 1px black;  border-left: solid 1px black;}
    td { border-right: solid 1px black;  border-top: solid 1px black; padding: 10px;}
    
    .container{  position: relative;}
    
    .table1-container, .table2-container{ width: 220px; }
    
    .table1-container{ position: absolute; left: 0; top: 0; overflow: hidden; color: red;}
    .table1-container td:first-child{ background-color: white;}
    .table1-container td:not(:first-child){ visibility: hidden;}
    
    .table2-container{overflow: scroll;}
    <div class='container'>
      <div  class="table1-container">
        <table  border=0 cellpadding="0" cellspacing="0" >
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
          <td>1-4</td>
          <td>1-5</td>
          <td>1-6</td>
          <td>1-7</td>
          <td>1-8</td>
        </tr>
         <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
          <td>2-5</td>
          <td>2-6</td>
          <td>2-7</td>
          <td>2-8</td>
        </tr>
         <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
          <td>3-5</td>
          <td>3-6</td>
          <td>3-7</td>
          <td>3-8</td>
        </tr>
        <tr>
          <td>4-1</td>
          <td>4-2</td>
          <td>4-3</td>
          <td>4-4</td>
          <td>4-5</td>
          <td>4-6</td>
          <td>4-7</td>
          <td>4-8</td>
        </tr>
      </table>
    </div>
    <div class="table2-container">
      <table   border=0 cellpadding="0" cellspacing="0" >
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
          <td>1-4</td>
          <td>1-5</td>
          <td>1-6</td>
          <td>1-7</td>
          <td>1-8</td>
        </tr>
         <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
          <td>2-5</td>
          <td>2-6</td>
          <td>2-7</td>
          <td>2-8</td>
        </tr>
         <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
          <td>3-5</td>
          <td>3-6</td>
          <td>3-7</td>
          <td>3-8</td>
        </tr>
        <tr>
          <td>4-1</td>
          <td>4-2</td>
          <td>4-3</td>
          <td>4-4</td>
          <td>4-5</td>
          <td>4-6</td>
          <td>4-7</td>
          <td>4-8</td>
        </tr>
      </table>
      </div>
    </div>

    完整demo: https://jsfiddle.net/9hdLarfj/

    展开全文
  • 近来浏览一个网页,发现它有一个列表页面,列表中展示的字段特别多,因此数据展示区域产生了横向滚动条,当向左拖动滚动条的时候,表格的第一第二列并不随着滚动条的移动而移动。主要信息一直的用户的视线中,...
  • 1.表格的宽度以及表格每一的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,...
  • 在element-ui里面的table表格上面找到fixed属性后,加到了要固定那个标签上面 但是又遇到这样一个问题 想了半天方法,我们可以给它加上css样式 <style> .el-table .el-table__fixed { height: auto !...

    在element-ui里面的table表格上面找到fixed属性后,加到了要固定那个标签上面在这里插入图片描述
    但是又遇到这样一个问题
    在这里插入图片描述
    想了半天方法,我们可以给它加上css样式

    <style>
    .el-table .el-table__fixed {
      height: auto !important;
      bottom: 16px;
    }
    </style>
    

    这样就可以了在哪行下面都可以进行拖拽滚动条

    原因是这个,因为我们用element-ui上面的组件,只是复制了他们的源代码,要在本文件下面或者全局App里面加上css来改变

    这是我今天遇到的问题,希望可以帮助你们,网友们

    展开全文
  • vue移动端复杂表格表头,固定表头与固定第

    万次阅读 热门讨论 2018-07-28 11:45:09
    前言 最近做移动端的h5项目,要做一个可配置表头的复杂表格,网上找了很久也没什么好方法,结合网上的一些例子,在此做一了一个完整的vue版的例子。 效果 ...第二步:封装 对插件再做一层封装...

    复杂表格表头
    #前言
    最近做移动端的h5项目,要做一个可配置表头的复杂表格,网上找了很久也没什么好方法,结合网上的一些例子,在此做一了一个完整的vue版的例子。
    #效果
    无图无真相,先上最终效果图再说 。
    table.gif
    #方法一:iscroll 插件版
    ###第一步:npm install
    引入 iscroll

    npm i iscroll --save 
    

    ###第二步:封装
    对插件再做一层封装,封装成 iscrollTable.js 方便调用,代码如下:

    // 统一使用
    const iScollProbe = require('iscroll/build/iscroll-probe');
    let scroller = null;
    let Selector = "";
    export function createIScroller(selector) {
      Selector = selector;
      scroller = new iScollProbe(Selector, {
        preventDefault: false,  // 阻止浏览器滑动默认行为
        probeType: 3, //需要使用 iscroll-probe.js 才能生效 probeType : 1 滚动不繁忙的时候触发 probeType : 2 滚动时每隔一定时间触发 probeType : 3   每滚动一像素触发一次
        mouseWheel: true, //是否监听鼠标滚轮事件。
        scrollX: true,  // 启动x轴滑动
        scrollY: true,  // 启动y轴滑动
        // momentum: false,
        lockDirection: false,
        snap: false, //自动分割容器,用于制作走马灯效果等。Options.snap:true// 根据容器尺寸自动分割
        //snapSpeed: 400,
        scrollbars: false, //是否显示默认滚动条
        freeScroll: true, //主要在上下左右滚动都生效时使用,可以向任意方向滚动。
        deceleration: 0.0001, //滚动动量减速越大越快,建议不大于 0.01,默认:0.0006
        disableMouse: true, //是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。
        disablePointer: true, //是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。
        disableTouch: false, //是否关闭触摸事件探测。如知道运行在哪个平台,可以开启它来加速。
        eventPassthrough: false, //使用 IScroll 的横轴滚动时,如想使用系统立轴滚动并在横轴上生效,请开启。
        bounce: false //是否启用弹力动画效果,关掉可以加速
      });
      scroller.on('scroll', updatePosition);
      scroller.on('scrollEnd', updatePosition);
      scroller.on('beforeScrollStart', function () {
        scroller.refresh();
      });
    
      function updatePosition() {
        let frozenCols = document.querySelectorAll(selector + ' table tr td.cols');
        let frozenRows = document.querySelectorAll(selector + ' table tr th.rows');
        let frozenCrosses = document.querySelectorAll(selector + ' table tr th.cross');
        for (let i = 0; i < frozenCols.length; i++) {
          frozenCols[i].style.transform = 'translate(' + -1 * this.x + 'px, 0px) translateZ(0px)';
        }
        for (let i = 0; i < frozenRows.length; i++) {
          frozenRows[i].style.transform = 'translate(0px, ' + -1 * this.y + 'px) translateZ(0px)';
        }
        for (let i = 0; i < frozenCrosses.length; i++) {
          frozenCrosses[i].style.transform = 'translate(' + -1 * this.x + 'px,' + -1 * this.y + 'px) translateZ(0px)';
        }
      }
    
      return scroller;
    }
    
    export function refreshScroller() {
      if (scroller === null) {
        console.error("先初始化scroller");
        return;
      }
      setTimeout(() => {
        scroller.refresh();
        scroller.scrollTo(0, 0);
        let frozenCols = document.querySelectorAll(Selector + ' table tr td.cols');
        let frozenRows = document.querySelectorAll(Selector + ' table tr th.rows');
        let frozenCrosses = document.querySelectorAll(Selector + ' table tr th.cross');
        for (let i = 0; i < frozenCols.length; i++) {
          frozenCols[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
        }
        for (let i = 0; i < frozenRows.length; i++) {
          frozenRows[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
        }
        for (let i = 0; i < frozenCrosses.length; i++) {
          frozenCrosses[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
        }
      }, 0);
    }
    

    ###第三步:使用
    引用前面的自己封装的iscrollTable.js,用到的table.vue的具体代码如下:

    <template>
        <div class="pages-tables " id="pages-tables">
            <div class="waterMask" id="watermark"></div>
            <div class="rolling-table meal-table" ref="tableBox" :style="{height: maxHeight + 'px'}">
                <table class="table" id="table" cellpadding="0" cellspacing="0" ref="rollingTable">
                    <tr v-for="(x,i) in xList" :key="i">
                        <th class="rows " :class="{'cross': index == 0 && i == 0}" v-for="(l,index) in x" :key="index" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
                    </tr>
                    <tr v-for="(l,i) in yList" :key="i + 'a'">
                        <template v-for="(x, xKey) in xField">
                            <td v-for="(ll,yKey) in l" :key="yKey" v-if="x === yKey" :class="{'cols': yKey == xField[0]}">
                                {{ yList[i][yKey]}}
                            </td>
                        </template>
                    </tr>
                    <tr></tr>
                </table>
            </div>
        </div>
    </template>
    <script>
    import { createIScroller, refreshScroller } from "libs/iscrollTable";
    import { addWaterMarker } from "libs/common/common";
    export default {
        data() {
            return {
                maxHeight:'100%',
                scroll: {
                    scroller: null
                },
                xList: [
                    [
                        {
                            field_name: "statis_date",
                            name: "第一行合并3行1列",
                            colspan: 1, //指定单元格 横向 跨越的 列数
                            rowspan: 3, //指定单元格 纵向 跨越的 行数
                        },
                        {
                            field_name: "custom_field",
                            name: "第一行合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第一行合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第一行合并3列",
                            colspan: 3,
                            rowspan: 1,
                        },
                    ],
                    [
                        {
                            field_name: "custom_field",
                            name: "第二行日期",
                            colspan: 1, //指定单元格 横向 跨越的 列数
                            rowspan: 1, //指定单元格 纵向 跨越的 行数
                        },
                        {
                            field_name: "custom_field",
                            name: "第二行日期合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第二行日期合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第二行日期合并3列",
                            colspan: 3,
                            rowspan: 1,
                        },
                    ],
                    [
                        {
                            field_name: "area_name",
                            name: "第三行当月新增",
                            colspan: 1,  //指定单元格 横向 跨越的 列数
                            rowspan: 1, //指定单元格 纵向 跨越的 行数
                        },
                        {
                            field_name: "area_name1",
                            name: "第三行当月新增1",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name2",
                            name: "第三行当月新增2",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name3",
                            name: "第三行当月新增3",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name4",
                            name: "第三行当月新增4",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name5",
                            name: "第三行当月新增5",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name6",
                            name: "第三行当月新增6",
                            colspan: 1,
                            rowspan: 1,
                        },
                    ],
                ],
                xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6",],
                yList: [
                    {
                        area_name: "新增数据开始",
                        area_name1: "新增数据开始1",
                        area_name2: "新增数据开始2",
                        area_name3: "新增数据开始3",
                        area_name4: "新增数据开始4",
                        area_name5: "新增数据开始5",
                        area_name6: "新增数据开始6",
                        statis_date: 100007,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据最后",
                        area_name1: "新增数据最后1",
                        area_name2: "新增数据最后2",
                        area_name3: "新增数据最后3",
                        area_name4: "新增数据最后4",
                        area_name5: "新增数据最后5",
                        area_name6: "新增数据最后6",
                        statis_date: 222222,
                    }
                ]
            }
        },
        mounted() {
            this.maxHeight = window.screen.height
            this.scroll.scroller = createIScroller(".meal-table");
            // addWaterMarker(document.getElementById('watermark'))
        }
    }
    
    </script>
    <style lang="less" scoped>
    .pages-tables {
      -webkit-overflow-scrolling: touch; // ios滑动顺畅
      position: relative;
    }
    .rolling-table {
        height: 100%;
        font-size: 0.28rem;
        color: #86939a;
        background-color: #fff;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        position: relative;
        top: 0;
        overflow: hidden;
      }
    .rows {
        position: relative;
        z-index: 3;
    }
    .cross {
        position: relative;
        z-index: 5;
    }
    table td {
      border: 0px solid #000;
      font-size: 0.32rem;
      background: #fff;
    }
    ::-webkit-scrollbar {
        display: none;
    }
    .table {
    //   border-collapse: collapse; //去掉重复的border
      color: #86939e;
      font-size: 0.32rem;
      border: 0px solid #000;
      min-height: 100%;
      text-align: center;
      td {
        border-bottom: 0.02rem solid #eee;
        white-space: nowrap;
        height: 0.86rem;
        line-height: 0.86rem;
        padding: 0 0.2rem;
      }
      th {
        color: #43484d;
        white-space: nowrap;
        height: 0.74rem;
        line-height: 0.74rem;
        padding: 0rem 0.3rem;
        background-color: #f3f4f6;
        font-weight: normal;
        padding-bottom: 0;
        padding-top: 0;
        border: 0.02rem solid red;
      }
    }
    tr{
        position: relative;
        background-color: #fff;
        &:nth-of-type(odd){
            td{
                // background-color: pink;
            }
        }
    }
    </style>
    

    注意点:

    1. table 外的盒子 .rolling-table 要设置高度,不然向上滚动失效
      2.固定和行与列,即:rows、cross 的position要设为relative

    最终效果就如上图。
    #方法二: 结合css,自定义封装版
    ###原理
    因为除了表头和第一列,其他都可以滚动所以需要:
    1.一个展示的table表格
    2.一个用来覆盖上表头的 thead,一个用来覆盖左上角的 div,一个固定在第一列的 tbody。
    3. 展示的table表格放在最底层,覆盖上表头的 thead固定定位在最上面,固定在第一列的 tbody固定定位在最左边,左上角的 div固定是左上角且z-index最大,在最上层。
    4. 固定的表格头部与第一列的宽、高、行高都是通过获取真实的表格的宽高来设定的。
    5. 通过展示的table表格的上下滚动从而带动固定在第一列的 tbody向上滚动,向左右滚动带动覆盖上表头的 thead的左右滚动。

    完整代码如下:

    <template>
        <div class="pages" id="pages" :style="{height: maxHeight + 'px'}">
            <table id="table" class="table" cellpadding="0" cellspacing="0">
                <thead v-show="showFixedHeaderCloFirst" class="fixedThead" id="fixedThead" :style="{left: fixedTheadLeft}">
                    <tr v-for="(x,i) in xList"   :key="i+'a'">
                        <th v-for="(l,i) in x" :key="i" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
                    </tr>
                </thead>
                <div v-show="showFixedHeaderCloFirst" class="fixedHeaderCenter" id="fixedHeaderCenter" :style="{'line-height': firstCloHeight + 'px',width: firstCloWidth-1 + 'px'}">{{xList[0][0].name}}</div>
    
                <tbody v-show="showFixedHeaderCloFirst" class="fixedHeaderCloFirst" id="fixedHeaderCloFirst" :style="{'top': fixedHeaderCloFirstTop ,'height': fixedHeaderCloFirstHeight}">
                    <tr v-for="(l,i) in yList" :key="i" :style="{width: firstCloWidth + 'px',height: cloFirstLineHeight + 'px'}">
                        <td :style="{width: firstCloWidth + 'px',height: cloFirstLineHeight -1 + 'px' }">{{l.statis_date }} </td>
                    </tr>
                </tbody>
                
                <thead >
                    <tr v-for="(x,index) in xList"   :key="index+'b'">
                        <th :class="{firstCol: index == 0 && i == 0}" v-for="(l,i) in x" :key="i" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr  v-for="(l,i) in yList" :key="i">
                        <td v-for="(x,xKey) in xField" :key="xKey">
                            <div v-for="(ll,yKey) in l" v-if="x === yKey" :key="yKey" :class="{'tables-content-item-yellow':yList[i][yKey] > 0 && validateVal(x),'tables-content-item-green':yList[i][yKey] <= 0 && validateVal(x),}">
                                {{ yList[i][yKey]}}
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                maxHeight: '100%',
                fixedTheadLeft: 0,
                fixedHeaderCloFirstTop: 0,
                fixedHeaderCloFirstHeight: '100%',
                th: [],
                tl: [],
                temp: [],
                firstCloWidth: 0,
                firstCloHeight: 0,
                showFixedHeaderCloFirst: false,
                cloFirstLineHeight: '0',
                fixedCol: false,
                fixedHeader: false,
                fixedA1: false,
                hLeft: 0,
                hHeight: 0,
                xList: [
                    [
                        {
                            field_name: "statis_date",
                            name: "第一行合并3行1列",
                            colspan: 1, //指定单元格 横向 跨越的 列数
                            rowspan: 3, //指定单元格 纵向 跨越的 行数
                        },
                        {
                            field_name: "custom_field",
                            name: "第一行合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第一行合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第一行合并3列",
                            colspan: 3,
                            rowspan: 1,
                        },
                    ],
                    [
                        {
                            field_name: "custom_field",
                            name: "第二行日期",
                            colspan: 1, //指定单元格 横向 跨越的 列数
                            rowspan: 1, //指定单元格 纵向 跨越的 行数
                        },
                        {
                            field_name: "custom_field",
                            name: "第二行日期合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第二行日期合并2列",
                            colspan: 2,
                            rowspan: 1,
                        },
                        {
                            field_name: "custom_field",
                            name: "第二行日期合并3列",
                            colspan: 3,
                            rowspan: 1,
                        },
                    ],
                    [
                        {
                            field_name: "area_name",
                            name: "第三行当月新增",
                            colspan: 1,  //指定单元格 横向 跨越的 列数
                            rowspan: 1, //指定单元格 纵向 跨越的 行数
                        },
                        {
                            field_name: "area_name1",
                            name: "第三行当月新增1",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name2",
                            name: "第三行当月新增2",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name3",
                            name: "第三行当月新增3",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name4",
                            name: "第三行当月新增4",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name5",
                            name: "第三行当月新增5",
                            colspan: 1,
                            rowspan: 1,
                        },
                        {
                            field_name: "area_name6",
                            name: "第三行当月新增6",
                            colspan: 1,
                            rowspan: 1,
                        },
                    ],
                ],
                xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6",],
                yList: [
                    {
                        area_name: "新增数据开始",
                        area_name1: "新增数据开始1",
                        area_name2: "新增数据开始2",
                        area_name3: "新增数据开始3",
                        area_name4: "新增数据开始4",
                        area_name5: "新增数据开始5",
                        area_name6: "新增数据开始6",
                        statis_date: 100007,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据",
                        area_name1: "新增数据1",
                        area_name2: "新增数据2",
                        area_name3: "新增数据3",
                        area_name4: "新增数据4",
                        area_name5: "新增数据5",
                        area_name6: "新增数据6",
                        statis_date: 201807,
                    },
                    {
                        area_name: "新增数据最后",
                        area_name1: "新增数据最后1",
                        area_name2: "新增数据最后2",
                        area_name3: "新增数据最后3",
                        area_name4: "新增数据最后4",
                        area_name5: "新增数据最后5",
                        area_name6: "新增数据最后6",
                        statis_date: 222222,
                    }
                ]
            }
        },
        filters: {
            dateFromt: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.slice(4)
            },
        },
        methods: {
            // 返回
            vdVal(val, value) {
                return value
            },
            // 是否包含 % 标志,有就要颜色控制
            validateVal(value) {
                let flag = false
                this.xList.forEach((e, i) => {
                    if (e.zd_name == value) {
                        if (e.zx_name.includes('%')) {
                            flag = true
                        }
                    }
                })
                return flag
            },
            $$(dom){
                return document.getElementById(dom)
            },
            savePosition(){
                this.maxHeight = window.screen.height
                this.$$("pages").onscroll = (()=> {
                    let offsetHeight = this.$$("fixedHeaderCenter").offsetHeight
                    let scrollTop = offsetHeight + 1 - this.$$("pages").scrollTop
                    this.fixedTheadLeft =  - this.$$("pages").scrollLeft + 'px'
                    this.fixedHeaderCloFirstTop = scrollTop + 'px'
                    console.log("scrollTop:",scrollTop)
                    console.log("this.fixedHeaderCloFirstTop:",this.fixedHeaderCloFirstTop)
                });
                // this.$$("fixedHeaderCloFirst").onscroll = (()=> {
                //     let offsetHeight = this.$$("fixedHeaderCenter").offsetHeight
                //     let scrollTop = - this.$$("fixedHeaderCloFirst").scrollTop
                //     this.$$("pages").style.left =  - this.$$("fixedHeaderCloFirst").scrollLeft + 'px'
                //     this.$$("table").style.top =  scrollTop + 'px'
                // });
            }
        },
        mounted() {
            setTimeout(()=>{
                this.firstCloWidth = document.getElementsByClassName("firstCol")[0].offsetWidth 
                this.firstCloHeight = document.getElementsByClassName("firstCol")[0].offsetHeight-1
                this.fixedHeaderCloFirstHeight = this.$$("tbody").offsetHeight + 'px'
                this.cloFirstLineHeight = this.$$("tbody").children[0].offsetHeight  + 'px'
                this.fixedHeaderCloFirstTop = this.firstCloHeight + 3 + 'px'
                this.showFixedHeaderCloFirst = true
                this.savePosition()
            },1000)
            
        },
    }
    
    </script>
    <style lang="less" scoped>
    ::-webkit-scrollbar {
        display: none;
    }
    .pages{
        overflow: scroll;
        height: 100%;
    
    }
    .fixedHeaderCenter{
        border: 1px solid red;
        background-color: #f3f4f6;
        color: #43484d;
        text-align: center;
        // padding: 0 0.3rem;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
    }
    .fixedHeaderCloFirst{
        // border-bottom: 1px solid #eee;
        height: 100%;
        line-height: 0.86rem;
        background: #fff;
        white-space: nowrap;
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        th,td{
            padding: 0;
        }
        // overflow: scroll;
        div{
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }
    }
    @main-color-green: #269513;
    @main-color-yellow: #fc9d2e;
    table {
      position: relative;
      color: #86939e;
      font-size: 0.32rem;
      border: 0px solid #000;
      min-height: 100%;
      text-align: center;
      white-space:nowrap;
      td {
        border-bottom: 1px solid #eee;
        white-space: nowrap;
        height: 0.86rem;
        line-height: 0.86rem;
        padding: 0 0.2rem;
        white-space:nowrap;
      }
      th {
          white-space:nowrap;
        color: #43484d;
        white-space: nowrap;
        height: 0.74rem;
        line-height: 0.74rem;
        padding: 0rem 0.3rem;
        background-color: #f3f4f6;
        font-weight: normal;
        padding-bottom: 0;
        padding-top: 0;
        border: 1px solid red;
      }
    }
    .tables-content-item-green {
      color: @main-color-green;
    }
    
    .tables-content-item-yellow {
      color: @main-color-yellow;
    }
    table {
        font-size: 0.3rem;
        // margin: 300px;
        border-collapse:collapse
    }
    .fixedThead{
        background: lightblue;
        position: fixed;
        top: 0 ;
        z-index: 2;
    }
    /*固定表头的样式*/
    .fixedHeader {
        background: lightblue;
        position: fixed;
        top: 0 ;
        z-index: 2;
    }
    
    </style>
    

    最终效果图如下:
    table.gif
    不过这个版本的上下滚动时的精准计算有点误差。
    ####推荐第一种方式。

    #最后
    希望文章内容对你有一点帮助!

    欢迎关注以下公众号,学到不一样的 武功秘籍

    关注公众号并回复 福利 可领取免费学习资料,福利详情请猛戳: 免费资源获取–Python、Java、Linux、Go、node、vue、react、javaScript

    BiaoChenXuYing.png

    展开全文
  • 这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个就是的科目,另外的就是后面的每个人的名字和他的成绩,只需要循环放在对应位置 <!-- 表格部分 --> <div > <div> <...
  • fastadmin固定表格某一的方法

    千次阅读 2020-10-22 10:13:52
    其他插件,这边只是提供一个修改方法 灵活固定 1.插件fixed-table-body-columns,插件地址 链接: https://pan.baidu.com/s/1P5gyATOHI5bRkgvjL234EQ 密码: ufvs 2.取出里边的两个文件 3.将文件放入项目中 4.将...
  • 纯html+css固定表格或多,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面的relative定位...
  • 下面三个表格需要分别根据中继器俩制作,第2表格做完之后需要表头和中继器需要"组合"为一个整体,然后选中鼠标右键,将其转为动态面板,接着在动态面板中设置为“横向滚动”,就能显示出横向滚动条。适当调小动态...
  • 好久都没有写文章了,上个月业务繁忙,事情比较多,最近在做移动端中发现了一个好玩的事情,那就是移动端中实现表格固定列有哪些方法: 1. position: sticky 粘性布局,这个属性也可以实现行和固定,在pc端...
  • uniapp 封装固定表头、固定列表格

    千次阅读 2021-06-29 14:17:03
    最近又有个很烦的需求,就是要在平板上渲染一张大表格,而且表格需要在向上滚动时固定表头,向左滚动时固定左侧,uniapp是不支持table的,网上的也很难找到合适的组件,这就尴尬了。 一时间想的是用scroll-view...
  • 编号 测试一 测试列二 测试三 测试
  • antd表格固定列遮挡

    千次阅读 2020-09-13 23:01:38
    需求:在原本表格基础上设置左右列为固定列。 现有情况:个别表格不带勾选框,个别表格带勾选框。 问题描述:前者直接给加上fixed即可,后者加上fixed会出现可移动被左侧固定列遮挡部分的情况。 给表格设置固定...
  • 关于js表格固定列实现

    千次阅读 2019-12-17 15:04:44
    一、概述 在开发过程中前端列表...这里实现了表格的x轴横向固定列和非固定列的滚动; 实现了表格y轴同步滚动; 实现思路 实现滚动条大家都知道怎么处理,但是设计固定列我一开始没有什么具体的想法,本来是考虑把...
  • 大家好,昨天有朋友问我,她想要一个表格中的表头固定,不管往下拉到几行表头都能看到,需要怎么设置?这个小技巧我一直以为大部分人都应该会,所以也就没有拿出来跟大家讲解,跟大家道个歉。让表格中特定的行列...
  • 所谓列固定,就是在横向滚动的时候一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。一、js文件里加入如下代码var $table = $('.table'); var $fixedColumn = $...
  • NULL 博文链接:https://jsufly.iteye.com/blog/655597
  • element-ui table表格固定列

    千次阅读 2021-05-21 18:38:45
    今天一个小伙伴问我,element里面table组件循环列表,怎么固定那些? 其实可以把tableData里面的key组成一个数组,fixed放在里面就可以了,代码如下: <template> <el-table :data="tableData" ...
  • excel表格第被隐藏起来了怎么办

    千次阅读 2021-07-26 02:21:18
    excel表格第被隐藏起来了怎么办选中B往前拉,然后右键“取消隐藏”还有一种针对只有A被隐藏的情况,点左上角全选表格,点右键,“取消隐藏”。exo表格下面的图标隐藏起来了怎么办按照下面图文操作快捷方式上...
  • 通过js实现固定表格的表头和某列 在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列。...在滑动中表头固定,第一列,第二列固定。前两列在固定在页面上的前提...
  • 基于Bootstrap Table的表格右侧列固定

    千次阅读 2019-09-11 14:13:10
    基于Bootstrap Table的表格右侧列固定 参考官方demo:https://examples.bootstrap-table.com/#extensions/fixed-columns.html 欢迎使用Markdown编辑器 你好! 这是你一次使用 Markdown编辑器 所展示的欢迎页。...
  • js实现表格首行首列固定滑动

    千次阅读 2019-06-18 09:12:11
    js+css实现table首行首的冻结效果。 这个方案是把表格分为4块,首行首不可滑动,利用onscroll 动态根据内容设置冻结首行首内容。 html 左上 左上 ...
  • 左右滚动的时候表格,表格第一列最后一列固定。 先上效果图可能会更明了些: 左右滚动时,两列固定,头尾中间部分跟着滚动。  上下滚动时,头尾固定,第一列和最后一列中间部分跟着滚动。 思路: 思考了很久...
  • js+css3实现固定表格头和

    千次阅读 2018-08-13 10:58:23
    受css3实现固定表格头部而无需设置单元格td的宽度这篇文章启发,用css3的transform实现的表格头和列固定, 这种实现方式优势就是简单,高效,原生。不改变table结构 以下只是简单的实现 &lt;!DOCTYPE ...
  • 关于elementUI表格 固定列&合计行

    千次阅读 2021-03-23 16:53:59
    当elementUI的表格需要 固定列 同时又要y有 合计行 时,会出现以下情况: 合计行被固定的三可以展示,但是其它的就不知道去哪了?! 通过万能的度娘,终于找到了解决方法,不得不说,广大网友的智慧真不是盖的...
  • vue 表格固定列表格另一侧滑动

    千次阅读 2020-04-29 13:49:59
    实现表格固定列,右半部分依旧可以互动效果,如下图: 解决思路: 写两个<table>: 一个是整体的table,table外侧的div保持宽度固定和overflow:scroll,内部的table宽度大于外部才能滚动起来; 一个是固定再...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 306,179
精华内容 122,471
关键字:

如何固定表格第二列