精华内容
下载资源
问答
  • 实现表格第一列固定
    千次阅读
    2018-05-21 11:51:30

    背景

    (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/

    更多相关内容
  • QT表格固定第一列,有需要的同学下来参考
  • 在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来改变

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

    展开全文
  • 添加一,这新增的这一第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二、原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加...
  • 在网页上实现类似Excel的效果,数据滚动条拖动固定第一行和第一列,附代码备注,一目了然
  • 让表格中特定的行列固定不动,这个功能在工作中经常能遇到,对于一些朋友来说应该是见怪不怪了。这个功能在工作中也是有很必要的用处的,比如我们在核对数据的时候,如果行列太多,将表头标题固定的话,很容易核对...

    大家好,昨天有朋友问我,她想要一个表格中的表头固定,不管往下拉到第几行表头都能看到,需要怎么设置?这个小技巧我一直以为大部分人都应该会,所以也就没有拿出来跟大家讲解,跟大家道个歉。

    让表格中特定的行列固定不动,这个功能在工作中经常能遇到,对于一些朋友来说应该是见怪不怪了。这个功能在工作中也是有很必要的用处的,比如我们在核对数据的时候,如果行列太多,不将表头标题固定的话,很容易核对错误,也非常不方便。

    如上面这样一张图片,当我们往下拖动表格的时候,表头的栏目就看不见了,如果我们看到下面的数据就很难对号入座了,如果不会冻结窗格,那老板要你核对一个表格数据你就要哭了。

    但是你接下来能够仔细看完今天的内容,你就能够让表格设置成如上图这种格式,不管往下拉到第几行,也可以轻松让每一个数据对号入座,准确核对。

    下面我们来学习常用的几种冻结表格方法,请大家务必仔细认真阅读。

    第一种:冻结第一行

    菜单栏里依次找到【视图】-【冻结窗格】-【冻结首行】,如下图所示:

    也可以选中第二行,然后如上方法依次找到【视图】-【冻结窗格】-【冻结窗格】,效果也是一样的,如下图所示:

    第二种:冻结第一列

    冻结第一列和冻结第一行的方法一样,【视图】-【冻结窗格】-【冻结首列】,如下图所示:

    你也可以选中B列后,点击【视图】-【冻结窗口】-【冻结窗格】,操作和上面一样,如下图:

    第三种:冻结多行或者多列

    如果我们要冻结前两行,那么我们就选中第三行,然后点击【视图】- 【冻结窗格】-【冻结窗格】,如下图演示所示:

    解析:冻结多列的方法和冻结多行是一样的,这里就不多做演示了。如需冻结前N行或者前N列,那就选中N+1行或者N+1列,然后点击视图下的冻结窗格按钮。

    上面冻结行和列的方法相信大家应该都学会了,那么问题来了,如果需要同时冻结行和列怎么做?比如我们需要第一行和第一列同时固定不动,应该怎么设置?聪明的朋友肯定会说,同时选中第二行和第二列,然后点击冻结窗格就好了,真的是这样吗?我们来看一下下图的操作结果。

    如上图实际操作证明,这种方法是不能实现同时冻结行和列的,这种方法的结果只能冻结最后选中的行或者列,也就是说,如果我们先选行,后选列,最后冻结的是列,相反也是一样,大家可以自己试一下。

    如果我们需要冻结A列和第一行,正确操作方法,鼠标选中B2单元格,然后选择【视图】-【冻结窗格】就可以了,如下图所示,非常简单。

    今天的课程又讲完了,是不是非常简单呢?大家学会了吗?还没学会的朋友赶紧跟着自己动手操作几遍,学会的朋友也别忘了关注我和分享这篇文章,小编可是饿着肚子给大家写的这篇教程,大家如果有问题欢迎给我评论留言,我们下期见吧,拜拜~~

    展开全文
  • 本文实例讲述了jQuery实现获取table表格第一列值的方法。分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
  • 先上完成的效果图:是根据查询结果增加的  数据格式:  表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element.品名, 面取数: element.面取数, LOTNO: element.LOT });  ...
  • 当拖动表格横向滚动条向右滚动时,实现列表第一列不动,后面向左移动
  • 多说,跟这小编来一起看下吧 1、CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2、Javascript [removed] //该函数在上面个table数据加载...
  • AXURE同时表格控件同时固定首行和尾,相同原理可以实现控制首行首。.
  • Element表格固定第一列第一行,并通过属性名动态渲染数据 <el-table :data="sentimentData" style="width: 680px"> <el-table-column fixed prop="name" label="区域" width="100"> <...

    Element表格固定第一列和第一行,并通过属性名动态渲染数据

    <el-table :data="sentimentData" style="width: 680px">
                <el-table-column
                  fixed
                  prop="name"
                  label="区域"
                  width="100">
                  <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column v-for="item in areaName" :key="item.index"
                  :prop="item.nano"
                  :label="item.name"
                  width="100">
                  <!-- 最重要的 scope.row[item.nano] 没有 [] 渲染不出来数据-->
                  <template slot-scope="scope">{{ scope.row[item.nano] }}  <!-- 动态数据方式 scope.row[item.nano] -->
                  </template>
                </el-table-column>
              </el-table>
              
    <!--sentimentData和areaName数组数据-->
    
    areaName:[ {name:'南海诸岛', nano: 'NH'},{name:'北京市', nano: 'BJ'},{name:'天津市', nano: 'TJ'}, {name:'上海市', nano: 'SH'}, {name:'重庆市', nano: 'CQ'},
           {name:'河北省', nano: 'HB'}, {name:'河南省', nano: 'HNB'}, {name:'云南省', nano: 'YN'}, {name:'辽宁省', nano: 'LN'}, {name:'黑龙江省', nano: 'HLJ'}, 
           {name:'湖南省', nano: 'HNS'}, {name:'安徽省', nano: 'AH'}, {name:'山东省', nano: 'SD'}, {name:'新疆省', nano: 'XJ'}, {name:'江苏省', nano: 'JS'}, 
           {name:'浙江省', nano: 'ZJ'}, {name:'江西省', nano: 'JX'}, {name:'湖北省', nano: 'HB'}, {name:'广西省', nano: 'GX'}, {name:'甘肃省', nano: 'GS'},
           {name:'山西省', nano: 'SX'}, {name:'内蒙古省', nano: 'NMG'}, {name:'陕西省', nano: 'SX'}, {name:'吉林省', nano: 'JL'}, {name:'福建省', nano: 'FJ'}, 
           {name:'贵州省', nano: 'GZ'}, {name:'广东省', nano: 'GD'}, {name:'青海省', nano: 'QH'}, {name:'西藏省', nano: 'XZ'}, {name:'四川省', nano: 'SC'}, 
           {name:'宁夏省', nano: 'NX'}, {name:'海南省', nano: 'HN'}, {name:'台湾省', nano: 'TW'}, {name:'香港', nano: 'XG'}, {name:'澳门', nano: 'AM'}],
           
    sentimentData: [
            { name: '全部', NH: 123, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,
              JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,
              NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514},
            { name: '农事事件', NH: 1154, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,
              JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,
              NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514},
            { name: '其他', NH: 1456, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,
              JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,
              NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514}
          ]
    

    渲染结果
    在这里插入图片描述
    滚动条可拉动,第一列为固定不动,nano为简称对应sentimentData里面的各个值。

    展开全文
  • Layui 表格table 第一次加载动态设置 1、PHP传动态数据到前端;前端json一下;循环设置 cols[0] 的值 2、PHP代码 $types = [ 1 => '类型1', 2 => '类型2', 3 => '类型3' ]...
  • Vue.js通过简洁的API提供高效的数据绑定和...在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,下面这篇文章主要给介绍了Vue.js实现表格动态增加删除的方法实例,文末提供了源码下载,需要的朋友可以参考借鉴。
  • 实现功能点 1.行的合并 2.的合并 3.给表头添加斜线 4.动态生成
  • 如果表格中的标题只有一行或一,可以通过冻结首行或首,使表格的标题始终显示在第一行或第一列1.打开所需文件,单击【视图】【窗口】组【冻结窗格】按钮,在弹出的下拉列表中选择【冻结首行】项。 ...
  • table表格实现第一列固定

    千次阅读 2020-04-26 10:28:05
    首先是css的样式,根据自己页面再调整宽高之类的属性,这里是我自己页面的: table { table-layout:fixed; } th { position:-webkit-sticky; position:sticky; } thead tr th { top:0;... z-index:1; width:200px} ...
  • 首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格想要操作那的内容咋办? 代码如下: for(var i=0;i<num+1;i++) { $...
  • html表格第一列和最后一冻结 阿闰 使用div思路,div溢出滚动, js动态获取宽度, 缺陷,滚动条不是很美观 .zuo{ width: 15%; height: 100%; /* border: 1px solid green; */ float...
  • 这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个就是第一列的科目,另外的就是后面的每个人的名字和他的成绩,只需要循环放在对应位置 <!-- 表格部分 --> <div > <div> <...
  • 纯html+css固定表格一列或多,其余进行横向滚动的方法 工作时候,遇到个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面的relative定位并...
  • (function() {var $container = $('.wxcep-table');$container.css({position: 'relative',overflow: 'auto'});$container.find('table').css({borderCollapse: 'collapse',whiteSpace: 'nowrap'})var $head = $cont...
  • 找到视图下的冻结窗格-冻结首行,即可。 冻结多行: 光标放在b2,选择冻结窗口下的冻结首行和第一列
  • Vue+elementui表格行转+动态生成

    千次阅读 2021-05-23 12:11:05
    这里跟上篇要求表格数据动态绑定是同个模块,在表格填完数据以后要求生成个报告;最后的实际月份字段中的数据有多少个月份就生成多少;里面的数据要对应cashin表和cashout表中相同月份比例后值的的累加金额 ...
  • 这几天做项目,需要做表格,将第一列固定不动,其他的超出的内容可以滚动,网上查了很多办法,刚开始写的是第一列一个表格,其他内容一个表格。给其他内容设置滚动条。(内容随着后台一直添加,长短不一) 遇到的...
  • 问题描述:elementui对话框中的elementui表格最后一列的线显示全。 解决办法: 写上以下代码,增加 z-index 的值 .el-table–border::after, .el-table–group::after, .el-table::before{ z-index: 2; }
  • html table 固定表头和,下载后,右键浏览器打开运行页面即可看到效果
  • 如图,为要实现的需求,即右键table的表头弹出菜单栏,通过勾选多选框的内容来控制表格列的显示和隐藏。 1. HTML部分(elemen-ui): <el-table :data="list" border fit @header-contextmenu="contextmenu"> ...
  • 在columns中加上个字段即可 columns: [ { field : 'checked', checkbox : true, //跟据返回每行的数据 formatter :function(value,row,index){ return row.id; } }, ] 获取本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,335
精华内容 38,134
关键字:

如何让表格第一列不动