在上面的HTML示例中,.scrollable-table-container类设置了overflow-x: auto;来启用横向滚动条,并且white-space: nowrap;确保表格内的内容不会换行,从而使得横向滚动条在必要时出现。表格本身(table标签)的width属性可以根据需要设置为百分比或固定值,但通常设置为100%可以使其适应容器宽度。 4. (可选)给出JavaScript代...
方法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...
需要在table外加一个div(注:修改滚动条样式的内容不支持ie) .unifiedContractTextBox{width:100%;overflow-x:auto;table{ width:100%;border-collapse:collapse;td{ line-height:23px;text-align:center;padding:10px 10px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:...
scrollTop // 容器向上滚动的距离 let bottom=tabOffsetTop+tabHeight-appScrollTop-appHeight; if(bottom>0&&tabWidth>tabWinWidth){ //底部大于0并且table的宽度大于el-table视口的宽度-->显示滚动条,并隐藏自己的滚动条 let scrollBarEle=null let childEle=null tabEle.classList.add("hide-scrollBar") //...
el-table是Vue框架中常用的表格组件,具有丰富的功能和灵活的配置选项,可以用于展示大量数据并支持数据的排序、筛选和分页等功能。在使用el-table时,经常会遇到横向滚动条的情况,而横向滚动条的距离则成为了一个需要重点关注的问题。 1. 横向滚动条的出现 在el-table中,当表格内容的宽度超出了容器的宽度时,横向滚动...
大家可以发现,固定了高度的 table 不仅出现了纵向滚动条,横向滚动条也出现了(只能滚动一点点),其实宽度是足够显示的。 有一点和#78相似,我的 table 也是配置化的,表头和内容都是作为属性传过去,可能导致表格在初次渲染时宽度计算不准确,导致最后宽度超过了 2px(经查验是 border 的宽度);但解决方案不适用,一方面...
elementplus的table横向滚动条使用 在使用Element Plus的table组件时,如果表格内容过多导致页面出现横向滚动条,可以通过设置table组件的属性scroll-x来实现横向滚动。具体做法是,在table标签中添加属性scroll-x="true"即可。 除此之外,还可以通过剪切滚动条到table元素实现吸底。如果需要设置el-table的横向滚动条一直显示...
简介:解决el-table中横向滚动条无法显示的问题 前言 之前在做项目的时候,突然发现el-table在使用的过程中遇到了一些问题,在整常情况下如果列表元素过长那么就会显示一个横向的滚动条,但是我的滚动条莫名其妙的消失了,最后解决了,所以记录一些解决的方式。
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 17px），导致 table 的横向滚动条出现。所以，建议强制给你的页面显示出纵向滚动条。
1、问题:el-table的合计行在横向滚动条下方 之所以会这样,是因为此时的横向滚动条为内容的横向滚动条(或者说表头、表内容和表尾三合一)。 2、解决办法 通过f12可以看到el-table的最外层表头类名为:.el-table__header-wrapper;最外层表内容的类名:.el-table__body-wrapper;(合计行位于表尾)最外层表尾的类名...