精华内容
下载资源
问答
  • 实现表格第列固定

    千次阅读 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/

    展开全文
  • js+css3实现固定表格头和

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

    css3实现固定表格头部而无需设置单元格td的宽度 这篇文章启发,用css3的transform实现的表格头和列固定,

    这种实现方式优势就是简单,高效,原生。不改变table结构

    以下只是简单的实现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
    	table{
    		table-layout: fixed;/*使用fixed实现th固定宽度*/
    		width:100%;/*在使用fixed的时候,必须指定width,否则还是自适应宽度*/
    		border-spacing:0;
    	}
    	th{
    		background:#888;
    	}
    	th,td{
    		border:1px solid #333; /*一定要同时有border和outline不然滚动会看着不协调*/
    		outline: 1px solid #333;
    		background:#fff;
    	}
    </style>
    
    <script>
    window.onload=function(){
    	//这是外层div
    	var tableDiv = document.querySelector("#tableDiv");
    	//这是水平可滚动距离
    	var diff = tableDiv.scrollWidth - tableDiv.clientWidth;
    	//获取最后一列单元格,在这个例子里,最后一列是第5列
    	var opts = tableDiv.querySelectorAll("tr td:nth-child(5),tr th:nth-child(5)");
    	//获取前两列单元格
    	var names = tableDiv.querySelectorAll("tr td:nth-child(1),tr th:nth-child(1),tr td:nth-child(2),tr th:nth-child(2)");
    	
    	//如果水平有滚动条,那一开始就需要让最后一列偏移
    	if(diff > 0){
    		for(var i =0;i< opts.length; i++){
    			opts[i].style.transform = "translateX(-"+diff+"px)";
    		}
    	}
    	
    	/*******固定的逻辑基本就下面这些*********/
    	var scroll_x = 0;
    	var scroll_y = 0;
    	tableDiv.addEventListener("scroll",function(e){
    		//垂直滚动固定头
    		if(this.scrollTop != scroll_y){
    			scroll_y = this.scrollTop;
    			this.querySelector("thead").style.transform="translate3d(0,"+this.scrollTop+"px,.1px)";
    		}
    		//水平滚动固定前两列和最后一列
    		if(this.scrollLeft != scroll_x){
    			scroll_x = this.scrollLeft;
    			for(var i =0;i< opts.length; i++){
    				opts[i].style.transform = "translateX(-"+(diff-scroll_x)+"px)";
    			}
    			for(var i =0; i< names.length ;i++){
    				names[i].style.transform = "translateX("+scroll_x+"px)";
    			}
    		}
    	})
    }
    </script>
    </head>
    <body>
    
    	<p style="text-align:center;">演示固定了头、第一列 、第二列以及最后一列</p>
    <div id="tableDiv" style="width:500px; height:400px;overflow:auto;margin:0 auto;margin-top:50px;">
    	<!-- table必须加transform这个样式,否则垂直滚动的时候,会有问题 -->
    	<table style="transform-style:preserve-3d;">
    		<thead>
    			<tr>
    				<th style="width:50px">Num</th>
    				<th style="width:120px">Name</th>
    				<th style="width:100px">Age</th>
    				<th style="width:300px">Address</th>
    				<th style="width:50px">Opt</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>1</td>
    				<td>张三</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>张三1</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>张三3</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>4</td>
    				<td>张三4</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>5</td>
    				<td>张三5</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>6</td>
    				<td>张三6</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>7</td>
    				<td>张三7</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>8</td>
    				<td>张三8</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>9</td>
    				<td>张三9</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>10</td>
    				<td>张三10</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>11</td>
    				<td>张三11</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    			<tr>
    				<td>12</td>
    				<td>张三12</td>
    				<td>10</td>
    				<td>这是一条很长很长很长很长很长很长很长很长的文字</td>
    				<td>
    					<a href="">编辑</a>
    				</td>
    			</tr>
    		</tbody>
    	</table>
    </div>
    </body>
    </html>

     

     

    展开全文
  • 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

    展开全文
  • 所谓列固定,就是在横向滚动的时候一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。一、js文件里加入如下代码var $table = $('.table'); var $fixedColumn = $...

    有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。

    一、js文件里加入如下代码

    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });

    二、样式文件里加入如下代码

    .table-responsive>.fixed-column {
        position: absolute;
        display: inline-block;
        width: auto;
        border-right: 1px solid #ddd;
    }
    @media(min-width:768px) {
        .table-responsive>.fixed-column {
            display: none;
        }
    }
    大功告成,打开手机浏览器,查看效果。
    展开全文
  • 这几天做项目,需要做表格,将列固定不动,其他的超出的内容可以滚动,网上查了很多办法,刚开始写的是一列一个表格,其他内容一个表格。给其他内容设置滚动条。(内容随着后台一直添加,长短不一) 遇到的...
  • 简单实现固定表格头和。 之前做了一个表格固定头和的,分享一下代码和思路。 滑动固定其他地方也可参考。 1.滑动仅固定头或2.滑动即可固定头,也可固定列
  • <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><...表格第列固定,右边内容可以左右滑动</title><styletype="text/css">*{margin:0;padding:0}.table...
  • 通过js实现固定表格的表头和某列 在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列。...在滑动中表头固定,第一列,第二列固定。前两列在固定在页面上的前提...
  • flex中表格第列固定

    千次阅读 2008-11-10 15:00:00
    设置网格中的lockedColumnCount="1"(固定列数)例:http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> lockedColumnCount="1" 
  • 使用EasyUI固定表格的行或

    千次阅读 2019-09-19 00:22:04
    在浏览表格数据时,固定表格首行的标题行或的id或name等字段可以方便查看,然而web中的table却没不像Excel表格那样能够固定行或,这时通常可以创建多个表格来实现这一需求。 例如,可以将表格首行和内容...
  • 合并表格第

    千次阅读 2015-01-22 11:28:16
    最近老是遇见第一是地市,第二列是区县。说一堆区县对应一个地市看起来不太好看,要把第一的地市合并在一起。故写了个小小的Demo,留待以后复用。 先看效果图,表一为原数据效果,表二为合并第一后的数据效果...
  • 其他插件,这边只是提供一个修改方法 灵活固定 1.插件fixed-table-body-columns,插件地址 链接: https://pan.baidu.com/s/1P5gyATOHI5bRkgvjL234EQ 密码: ufvs 2.取出里边的两个文件 3.将文件放入项目中 4.将...
  • 表格中就算我们已经固定表格的宽度和第一行所有的宽度,可是当第二行中的的内容发生改变时还是会挤压到其他,这里给大家一个解决方法。 &lt;table style="table-layout:fixed;"&gt;&...
  •   鉴于之前有几个项目都用到了一行列固定不动的表格,所以整理了一下制作这种表格的方法。   基本原理是把表格分为四个部分,左上角是固定不动的,一行和一列是半固定的,只能左右移动或者上下移动,...
  • 移动端实现固定表格首列和表头(vue) ...然后给tbody添加一个滑动监听,滑动的时候,触发事件让表头和首列固定就可以。 但是注意的是,高度和宽度必须都要统一设置好,不然会出现表格不对齐的问题。 实...
  • 通过js实现固定表格的表头和某列 在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。...在滑动中表头固定,第一列,第二列固定...
  • html表格固定首行首

    千次阅读 2017-07-03 00:10:05
    html表格固定首行首,适用于标准表格,格式如下: 写了两个方法: 1,表格表头固定,这种方法是copy一个table操作,不会改变原table任何样式,但是不
  • 一、概述 在开发过程中前端列表...这里实现了表格的x轴横向固定列和非固定列的滚动; 实现了表格y轴同步滚动; 实现思路 实现滚动条大家都知道怎么处理,但是设计固定列我一开始没有什么具体的想法,本来是考虑把...
  • 固定表格table的某一

    千次阅读 2013-09-17 22:07:00
    TableID:我们要设置固定列的table的id, FixColumnNumber你要使table的哪一列固定的列序号, width:table的宽度, height:table的高度 使用时要引入:&lt;script type="text/javascript" src="...
  • 纯html+css固定表格或多,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面的relative定位...
  • 编号 测试一 测试列二 测试三 测试
  • 对于layui,大家都用过吧:轻量级...一:滚动条在固定列的上面---固定列方法:fixed: 'right' ,固定表格右边 问题: 改变表格高度后--上,下拉动或者放大缩小页面或者页面过小后,滚动条被固定列覆盖,表格...
  • 给一个表格第二列添加背景色为red: td .test{ background:red; } 123 456 789 aaa bbb ccc $("tr")....
  • vue表格实现固定表头和首

    千次阅读 2020-07-08 15:26:38
    前段时间做移动端的项目,项目中需要一个固定表头和首表格,但由于是移动端的,组件库里没有类似的,于是,就去网上找看有没有类似的,结果越找越气,10个文章9个抄,抄也行,你倒是抄个能用的啊,一篇根本就不...
  • 如何定住表格一行

    千次阅读 2016-02-03 17:45:13
    如何定住表格一行 #页面布局如何将表格定住将表格定住,表格的右侧滚动方法一 .outer { position:relative; } .inner { margin-left: 的宽度; overflow: hidden; overflow...
  • 可使用这个免费的插件 ... 也可从 ...下载 ...1.先选中表格 ...2.插入宏“Tableenhancer” ...3.在“Tableenhancer”宏编辑界面,找到“Number of rows to keep visible”,设置固定的行数就可以了
  • 基于Bootstrap Table的表格右侧列固定

    千次阅读 2019-09-11 14:13:10
    基于Bootstrap Table的表格右侧列固定 参考官方demo:https://examples.bootstrap-table.com/#extensions/fixed-columns.html 欢迎使用Markdown编辑器 你好! 这是你一次使用 Markdown编辑器 所展示的欢迎页。...
  • <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">...固定第</title> <style> *{ margin: 0; padding: 0; } body{ padding: 100px;
  • asp.net table表格表头及列固定实现

    千次阅读 2015-09-21 18:32:38
    在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,1、2列就看不见了,于是需求就出来了,就是需要固定table的表头和列。demo结构如下图所示:demo下载地址:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 261,830
精华内容 104,732
关键字:

如何固定表格第二列