精华内容
下载资源
问答
  • <div><p>重现方法(...表头出现滚动条,如何去掉? 示例代码:http://runjs.cn/code/gekre9nb 预览:http://sandbox.runjs.cn/show/gekre9nb 火狐下效果 chrome下效果 ...
  • 解决思路:鼠标进入存放table的div页面滚动条消失,table滚动条滚动,离开页面滚动条出现 <template> <div class="content"> <div class="table" @mouseover="tableHover" @mouseout="tableOut">...

    解决思路:鼠标进入存放table的div页面滚动条消失,table滚动条滚动,离开页面滚动条出现

    <template>
      <div class="content">
        <div class="table" @mouseover="tableHover" @mouseout="tableOut">
          <!-- table -->
        </div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        //鼠标滑过事件
        tableHover() {
          let dom = document.querySelector(".box"); //出现滚动条的div
          let child = document.querySelector(".content"); //显示内容的div
          dom.style.height = "100vh";
          /**
           * 17px滚动条的宽度,padding的原因因为使用了rem布局,滚动条的显示隐藏会造成页面的宽度缩放
           */
          child.style.paddingRight = "17px";
          dom.style["overflow-y"] = "hidden";
        },
        //鼠标离开事件
        tableOut() {
          let dom = document.querySelector(".box");
          let child = document.querySelector(".content");
          dom.style.height = "unset";
          child.style.paddingRight = "0px";
          dom.style["overflow-y"] = "auto";
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>
    

    希望有更好解决办法的朋友可以分享一下。

    展开全文
  • table内容出现滚动条表头对齐
  • ant table 组件的滚动条样式不太好看 考虑调整一下 而且表头 和x轴还出现滚动条滚动条样式: 去掉表头滚动条 .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden; height...

    ant table 组件的滚动条样式不太好看 考虑调整一下 而且表头 和x轴还出现了滚动条
    原滚动条样式:
    在这里插入图片描述

    1. 去掉表头的滚动条
    .ant-table-fixed-header .ant-table-scroll .ant-table-header {
          overflow: hidden;
          height: 70px;
        }
    
    1. 去掉x轴的滚动条就比较容易了 直接设置table的scroll(不设置x即可):
    scroll={{y: 350}}
    
    1. 修改滚动条的样式:
    .ant-table-body{
          &::-webkit-scrollbar {
            height: 5px;
            width: 10px;
            overflow-y: auto;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(89, 89, 89, 0.2);
            background: #939392;
          }
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: 0;
            border-radius: 0;
            background: #f0f2f5;
          }
        }
    

    效果:
    在这里插入图片描述
    这个是借鉴大佬的 附上链接:
    https://blog.csdn.net/jane_96/article/details/82906068

    展开全文
  • 先来几张图吧:第一:滚动条在固定列的上面---固定列方法:fixed: 'right' ,固定在表格右边问题: 改变表格高度后--上,下拉动或者放大缩小页面或者页面过小后,滚动条被固定列覆盖,表格前后不对应-错位现象出现如...

    对于layui,大家都用过吧:轻量级框架,使用方便,快捷,入手难度小,但是这些优点就不代表你没有踩到它的坑。

    目前遇到一个问题,搞得焦头烂额的,也问了很多的人,度娘也是无能为力。

    先来几张图吧:

    第一:滚动条在固定列的上面---固定列方法:fixed: 'right' ,固定在表格右边

    问题: 改变表格高度后--上,下拉动或者放大缩小页面或者页面过小后,滚动条被固定列覆盖,表格前后不对应-错位现象出现

    如:

    原因分析:1,固定列与原表格呈现的是:兄弟关系而不是子集关系

    2:然而两个div中都有 ayui-table-body 这样一个属性,导致在改变高度的时候整个表格和固定列的高度是一样的

    但是并不能一样,因为有滚动条的原因:滚动条占高17px,滚动条占了表格高,却没有占据固定列的高,所以就覆盖了滚动条-----------------此情况只在有滚动条的情况下,没有滚动条则不管,因为不会错位

    3:办法:在处理表格高度的同时也要处理固定列的高度(相差一个滚动条的高度--17px);

    4:另外:判断是否滚动条--jqury写法function hasScrollbar() {

    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);

    }

    js:只需将document.body 换成你的元素的即可 ; 注:js获取元素需要加上[0],指明是哪一个具体元素

    展开全文
  • 目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列上去的话,它是无法被滚动的...

    7cadc5a559a4f45c9c8a45d36273f584.png

    目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列上去的话,它是无法被滚动的,比如下面这个效果图

    9326c9cbf857cc672593f61d1686f4ec.gif

    当然这个不是一两个样式就能搞定的事情,不然也就不需要整个帖子了,受限于layui table的实现方式特别是表头固定和左右列固定的实现方法,基本说只添加一两个css应该是处理不了的。

    目前我的处理方式有几步:

    第一步就是在特定的时候要让固定列区域下的tbody是可滚动的,这样子才能去监听由用户鼠标操作的滚动

    这个一般可以利用一个css的hover来出来

    17298caaa8063bf892d0e654bfbad550.png

    但是,这个只是开头中的开头,还需要一些辅助处理,不然出来的结果就会是下面这样子的

    e4a0d0f48c60b9af7c5fdb81298ee3d1.png辅助处理呢,这个得先了解以下table目前的固定列的一些样式,比如如果有滚动条的话他会计算出来滚动条的宽度,然后有固定列的right就是根据这个值去得出来一个值,具体要看滚动条的宽度了。

    如果内容少没有滚动的那么他的right就是-1,所以一般来说就是在hover的时候要给它right:0,让它跟内容的容器的滚动条重叠,看着就像什么也没变化一样但是实际是固定列的tbody也给加了可以滚动的支持了,

    806e16ce81be7a37bb1bbb0f831a45ea.png

    这里不能直接hover的时候就right:0,上面说了,不需要滚动的时候他本来是-1所以如果不管什么时候hover他都是0的话在不需要滚动的时候就会异常的跳一下,那么这个标记怎么来的?这个是通过js事件在鼠标移入的时候就判断是有需要,在需要的情况下就给mark一下大致如下:

    7d80136f24d8002d9fc9244453fa88c9.png到这里一般就可以滚动了效果如下:

    eed06efb90450ac2bd40596f0e9e5f7c.gif

    第二步,接下来重头的就是要处理跟实际内容的同步滚动了

    一般来说就是监听scroll然后让layMain跟着滚动,但是!实际情况定然不会这么简单,因为原始的layMain的滚动事件就已经同步的让固定列去滚动了,这个滚动也会触发你加到固定列的滚动监听。

    那么就会出现1212121212121212....这样循环下去,当然滚动的还好一些它不会出现死循环,要是发现没有滚动位置他也就停了,但是会大大的使得很难滚动一样,就是变龟速了,因为滚动一下改变了对方对方反过来也会影响己方这样如是反复。

    那么如何处理,还是前面的套路,就是在特殊的情况下给个标志,然后在固定列滚动的监听中根据这个标志去决定是否要同步对方,反过来也是,layMain的滚动也得看情况同步,大致的代码如下

    51920d18b109fffe604713e797c6dc5e.png最后的效果:

    8bfacc7a20a1eef324eb92fa02d67727.gif

    第三步, 然后是处理左固定的相关样式

    因为追求跟鼠标没悬浮上去一样,也就是说左边的要是一个看不到滚动条但是有能够监听到鼠标滚动的,做了一些特殊的处理:

    fb92ee3a5e70c0f15ddd2b38cddabde5.png样式

    8a6a4f866443fa1772e0b40243ce06ca.png

    效果:

    7df8e74543e500af097f8dcdba1f158b.gif

    最后这个修改就看怎么理解了,如果觉得要显示滚动条出来好的话就把最后的这步处理去掉就好了

    测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

    注:以上代码中insObj是table.render内部new出来的表格实例,不是return回来的对象,所以以上代码是在tablePlug内部有效的,如果不想使用这个插件但是要做对应的处理的话,可以参考以上的逻辑,将insObj.layMain之类的换成对应的表格的jquery对象即可。

    在tablePlugv0.1.6的版本中对这部分的一些逻辑进行了微调,主要就是将一些可以用事件委托的用事件委托的方式实现,一些能用其他的选择器比如:hover代替的就不用标记mark class的形式了,修改大概如下:

    删除之前固定列的body鼠标移入移出的事件处理,

    8499c1e2923eaefe85c50287ca49ff32.png改用事件委托的方式:

    5601524f7dead9018371a732aa2894f7.png联合滚动的时候采用是否hover的形式不用之前的mark了省得要加入和删除这个mark,最终效果一样

    c20bda2ba1173394122c00e2ff0e1258.png

    展开全文
  • 表头、表尾固定,表格内容超出一定高度会出现滚动条;思路是弄三个table,头、内容、尾各占一个,内容用滚动的盒子包裹,头和尾也可以用div包裹
  • 纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应的字段名,影响体验效果...
  • 出现滚动条时,划到右边就会出现这个问题,求解决办法!谢谢大家![face]qq:54.gif[/face] 之前网上看到很多用 body .el-table th.gutter { display: table-cell!important; } 但是并没有用
  • 2、用一个div把两个表格包在一起,并且设置宽度,在让它可以横向滚动,overflow-x: auto 3、在设置里面两个table的宽度为一样,在设置内容表格overflow-x:hidden;overflow-y:auto <!--表格表头固定--HTML...
  • 问题如图所示: jqgrid版本是5.0.0,所用样式是bootstrap版本3.3.6,解决上面问题,加如下样式 .ui-jqgrid-hbox { overflow-y: scroll; ...解决办法不一定每个人都好使,每个人有每个人的解决方法...
  • 首先,这是原文链接:https://www.mybj123.com/667.html,作者也写的比较好,但是我在原文的基础上,也发挥了一下自己的头脑,做了一点补充。 下面是我结合作者的代码做了一些修改的代码: <...
  • 首页考虑给两个table,一个用在表头,一个用在内容渲染 第一步: 1、给表头里面colgroup添加col元素,并给col元素添加宽度,宽度可以自己根据项目的需求去定宽度 例: <teble> <colgroup> <col ...
  •  当GridPanel表头太长的时候,我们可以设置属性“autoScroll:true”,当有数据的时候就会出现滚动条,当没有数据的时候   ,滚动条就没有出现。    解决的办法:    Ext.override(Ext.grid.GridView, { ...
  • HTML table表格 固定表头 tbody加滚动条

    千次阅读 2019-12-31 18:00:02
    由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应的字段名,影响体验效果! 实现思路: 将内容要滚动的区域控制...
  • (thead标签里面直接写th标签,此时浏览器会自动在th外面加一层tr标签,所以thead里面的tr宽度减去滚动条宽度就可以了) 例: js: // 表格对齐 var tbodyH = $("#tbody").outerHeight(true); if ($("#tbody tr...
  • 表格横向宽度超出后,滚动条没有出现 问题描述: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201207113326985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly...
  • 1、比较low的方法是,把<thead>和<tbody>分别包裹在两个div里面,tbody的div用overflow:auto,即可。 2、通过css样式实现。 <!DOCTYPE html> <html> <head>......
  • html table表头不变滚动表体

    万次阅读 2016-04-09 00:31:39
    table 需要出现纵向滚动条时,大多数情况会在table外面包一层div 设置css属性 overflow:auto 来实现table出现滚动条但这样做有个问题,滑动表格是移动整体 表头也会被移动。 解决办法有如下 1、 设置两个table 表头...
  • 表头表身分离势必是两块结构,表身多出个滚动条必然会导致表头表身在出现或不出现滚动条的一种情况下无法对齐,滚动条占当前元素宽度,使用盒模型无法解决滚动条宽度的问题;使用绝对定位可以解决滚动条宽度问题,...
  • 纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应的字段名,影响体验效果...
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta ... &l
  • 1、定义CSS样式 .fixTitle { ... TOP: expression(this.offsetParent.scrollTop) }2、将DataGrid控件放到一个DIV中其中 AUTO和SCROLL是为了让表格多记录时出现滚动条3、在表格的标头样式中引用上面定义的CSS代码 
  • 最近使用element表格,在表格出现滚动条的时候,发现线对不齐,如图: 这是因为表头预留的滚动条位置跟表内容的宽度不一样; 解决方法: 第一种: body .el-table th.gutter { display: table-cell!important...
  • 3.这样表格内容和表头出现错位的现象. 4.我采取的办法是锁定单元格的固定宽度,最后一个单元格设置为自适应宽度,以缓冲多出来的滚动条的宽度.code: .ctBody { /*该块元素前后带有换行符*/ display:block; /*h
  • DataTable渲染表格时,表格中的数据长度太长,表格数据撑到右边后,看不到全部数据,所以想到增加一个水平滚动条解决此问题,确实增加了 “scrollX”: true,“autoWidth”:true 之后问题解决了,又引发了当浏览器的...
  • tbody出滚动条导致表头错位,上网上搜了一下,发现全是答非所问,能隐藏滚动条,还用问??我当前作出的效果是当tbody内容在正常情况下显示时,不显示滚动条,当内容区域高度超过外部容器时,滚动条自动显示。外部...
  • 当页面加载数据,数据条数太多,导致table出现滚动条,应该是 dom渲染问题,table默认加载没有滚动条.数据多 异步加载导致如下问题,解决方案: src->styles->index.scss 或者 APP.vue下 添加 如下 样式,缺一不可! ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 176
精华内容 70
关键字:

表头出现滚动条