解决LayUI数据表格横向滚动条无效的办法

最新推荐文章于 2024-04-22 16:21:21 发布
最新推荐文章于 2024-04-22 16:21:21 发布
阅读量3.4k 收藏
点赞数 4
分类专栏： # Layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44864879/article/details/106746558
版权

作为一个刚学习LayUI 的小白，遇到了问题，只能去看文档（自己太粗心，没好好看），然后就问百度（这个感觉比看文档要来得快，好了，我一般是百度，O(∩_∩)O哈哈~）
在这里插入图片描述
如图，像下面的滚动条，无效？？，说下我的为什么无效，主要还是自己的问题，面向CV编程（能复制粘贴的绝不手打出来），还有就是没有认真的读官方文档。

解决办法见下图，官方的解释
在这里插入图片描述
我用面向CV编程把每个字段都加上了 fixed:left ，这能拖动就见了个鬼了，CV惹的祸啊，O(∩_∩)O哈哈~

滚动条默认是可以拖动的，如果不想让某些列随着拖动，就把不想托动的列加上 fixed:left 或者 fixed:right ，就好了

我_還記得
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui表格自适应宽度出现横向滚动条
qq_39280563的博客
09-06 1万+
上bug图： 横向出现了滚动条，逼死强迫症了。控制台打开，审查元素，发现多了一列： 官方给出的解决方案：https://fly.layui.com/jie/18737/ 我的代码就是因为表格高度给高了几个像素导致页面出现了滚动条(不信你回去看第一张图~)，调整表格高度就好了。 如果你们的问题还没有解决，可以看看是不是自定义的宽度导致的，参考文章： https://blog.csdn.net/dreamer0823/article/details/105689228/ ...
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui表格出现横向滚动条（表格宽度超出）
06-08 5296
问题页面 解决方案 页面加上此css:.layui-table-body{overflow-x: hidden;} 完美解决！^ - ^ 以上
layui数据表格横向滚动条不显示问题
最新发布
cqdddgs的博客
04-22 545
* 设置滚动条轨道背景颜色 */background-color: #888;/* 设置滚动条滑块颜色 */border-radius: 5px;/* 设置滚动条滑块圆角 *///用来指定滚动条的样式,设置滚动条显示为内联元素。/* 设置滚动条滑块的样式 */使用的框架是layuimini，
Layui表格固定列不能滚动问题，亲测可用
qq_35178953的博客
07-13 2357
css: .layui-table-fixed .layui-table-body::-webkit-scrollbar {display:none} .layui-table-fixed .layui-table-body:hover{overflow-y: auto;} JS: $(".layui-table-fixed-l .layui-table-body").hover(function () { $(".layui-table-fixed-l .layui-table-
layui 实现table翻页滚动条位置保持不变的例子
10-16
为了解决这个问题，我们需要在表格重载前记录滚动条的位置，并在数据重新加载后恢复这个位置。 以下是一个具体的解决方案： 1. 首先，我们需要为layui table定义一个外层div，给它一个唯一的id，例如 "table_and_...
实例讲解DataTables固定表格宽度(设置横向滚动条)
08-30
本文将通过实例讲解DataTables固定表格宽度(设置横向滚动条)，并解决表格宽度问题。 标题：实例讲解DataTables固定表格宽度(设置横向滚动条) 描述：通过本文，您将学习到如何使用DataTables固定表格宽度，设置横向...
Extjs gridpanel 出现横向滚动条问题的解决方法
12-09
代码如下:viewConfig : { layout : function() { if (!this.mainBody) { return; // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width;...
Jsp整合LayUI table工具栏没有横向滚动条
qq_35752389的博客
01-02 933
Jsp整合LayUI table工具栏没有横向滚动条
table表格内容上下移动的三种实现方法
05-07
该代码为大家展示了table表格内容上下移动的三种实现方式，通俗易懂
layui-table出现横向滚动条
weixin_41327789的博客
04-22 7796
.layui-table-body{overflow-x: hidden;}
创新实训-layui表格不显示滚动条|网页元素不随着网页的缩放而错位，自适应
qq_41859471的博客
06-24 2865
创新实训-layui表格不显示滚动条|网页元素不随着网页的缩放而错位 一.layui表格不显示滚动条 因为首页中有一个页面是用layui表格做的，如果返回的数据过长，默认会将多余的隐藏，显示…，并出现滚动条，这种显示方式并不适当，因此要将滚动条隐藏。 CSS中overflow属性是控制内容溢出的，值为visible则不进行修剪，内容会超出；值为hidden则进行修剪，其余内容不显示。因此将layui.css中的相关设置进行修改。一开始直接修改.css中的内容，但是这种方式会影响其他成员的页面显示，所以最后在
layui使用总结--解决数据表格出现横向滚动条的情况
yoonhi
04-22 1万+
在 x-admin 后台框架中使用 layui 的数据表格 表格下方出现了滚动条，看着十分碍眼 如图 但是我发现，只要将最左边的复选框去掉，便不会出现滚动条 如图 滚动条就没了 当然这不是最优解 因为有些情况下是需要用到复选框的 那么如何在既显示复选框的情况下，又没有这可恶的滚动条呢 大致在百度到一些相关问题和答案 仅供参考 ...
layui 数据表格横向滚动条位置 调整滚动条位置在合计下方
qq_33360016的博客
09-10 2969
layui 数据表格横向滚动条位置调整滚动条位置在合计下方 调整滚动条位置在合计下方 查阅layui table 源码得知其处理如下： 所以我们反向处理一下同步就行： 样式调整 <style> .layui-table-total { overflow: auto; } .layui-table-body { overflow: hidden; } </s
layui数据表格table的横向滚动条显示问题
热门推荐
c1286912980的博客
10-15 3万+
加上这段样式代码就可以解决了： &lt;link type="text/css" rel="stylesheet" href="layui/css/layui.css" /&gt; &lt;style&gt;     body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ &lt;/style&gt;   ps：这个问题fly社区给出的解释是：table..
layui-设置div固定在页面上不随滚动条滚动
qq_43604300的博客
08-08 2125
思考：腾讯云的服务器购买界面，选择不同的配置会显示对应的价格，价格框固定在页面底部，不会随着滚动条滚动而滚动，便于用于查看价格。这里实现的是固定这个价格框，使其不会滚动。layui中div的属性设置放在CSS中，首先设置一个CSS样式。最终的效果显示是这样的，即使滚动页面也不会，这个价格框也不会动。然后在body中引用。...
layui页面的自动上下滚动
qq_39162838的博客
05-29 3527
核心代码 /* 滚动条自动上下滚动 */ scrollBar(); function scrollBar() { var height = $('.layui-table-body').height(); var number = 0; var length = 0; var time = setInter
layui table 表格行双击事件在移动端不响应
zcc的博客
08-05 1036
看layui 的 table.js 源码 可知 双击绑定的是 dblclick，在移动端不响应，所以自己绑定双击事件。该事件为 layui 2.4.0 开始新增。
layui数据表格当浏览器缩小时不会自动出现横向滚动条
06-13
在Layui数据表格中，当浏览器缩小时不会自动出现横向滚动条的问题，可以通过以下两种方式解决： 1. 设置表格容器的CSS样式，使其具有固定宽度并且具有横向滚动条。 例如，在表格容器的div标签中添加以下CSS样式： ``` <div style="width: 100%; overflow-x: auto;"> <!-- layui数据表格代码 --> </div> ``` 其中，`width: 100%;`表示容器宽度为100%，`overflow-x: auto;`表示容器出现横向滚动条。 2. 使用Layui提供的 `lay-size="sm"` 属性，将表格设置为响应式表格，当浏览器窗口缩小时，表格会自动变为响应式表格，出现横向滚动条。 例如，在 `table` 标签中添加 `lay-size="sm"` 属性： ``` <table lay-filter="demo" lay-size="sm"> <!-- 表头和表身 --> </table> ``` 以上两种方式均可解决表格缩小时不出现横向滚动条的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值