在这个示例中,.table-container是表格的容器,设置了固定的宽度和高度,并通过overflow: auto;启用了滚动条。当表格内容超出容器的尺寸时,滚动条将自动出现。
Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height:225px;overflow:scroll;"> ... </div> table的长度和宽度也要固定 <table cellspacing="0"width="732px"id="dataTableDetail"align="center"> ... </table> 如果你只要设置垂...
现在只要table的长度或是宽度大于div的长度或是宽度,滚动条就显示出来了。
方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
//页面最多显示的行数 maxNumner: 4, //滚动速度(毫秒) speed: 1500, //数据总条数,默认5 totalNumber: 5, //是否滚动,默认滚动 isScroll: true, //背景色 background: "#FFFFFF", //字体颜色 color: "#909399", }; //参数处理 let options = Object.assign(defaultOptions, binding.value); ...
最近在做一个需求,在设置table的 scroll:{ y:700 }垂直滚动后,发现不管页面有多少条数据,滚动条会一直存在,个人感觉不太好,按理来说应该是表格内容超出一定的区域才显示,你觉得呢?最后通过以下方法简单粗暴的解决了: ::v-deep .ant-table-scroll .ant-table-body { ...
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 17px），导致 table 的横向滚动条出现。所以，建议强制给你的页面显示出纵向滚动条。
/***表头/表主体table列宽***/ .view-box .col-1{width:20%;} .view-box .col-2{width:12%;} JS代码:// 表主体高度超出父元素高度(出现滚动条)则将表头table宽度设置等于表主体宽度 window.onresize = function() { var parentHeight=$(".parent-box").height(); ...
简介:解决el-table中横向滚动条无法显示的问题 前言 之前在做项目的时候,突然发现el-table在使用的过程中遇到了一些问题,在整常情况下如果列表元素过长那么就会显示一个横向的滚动条,但是我的滚动条莫名其妙的消失了,最后解决了,所以记录一些解决的方式。