如果 layui 数据表格列宽自适应出现横向滚动条的解决方案

分享 未结
41 21049
贤心
贤心 2017-11-17
悬赏:20飞吻
正常情况下,自适应的列宽不会导致 table 容器出现滚动条。如果你的出现了,请按照下述方案解决:
1. 如果 table 是在 layui 的后台布局容器中(注意:不是在 iframe 中),在你的页面加上这段 CSS:
.layui-body{overflow-y: scroll;}
2. 如果 table 是在独立的页面,在你的页面加上这段 CSS:
body{overflow-y: scroll;}
总体而言,table 列宽自适应出现横向滚动条的几率一般是比较小的,主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕,这时 table 容器会被强制减少滚动条宽度的差(一般是 17px),导致 table 的横向滚动条出现。建议强制给你的页面显示出纵向滚动条。
回帖
  • fallsea
    2017-11-17
    2 回复
  • 小偏执
    2017-11-17
    火前留名[嘻嘻]
    1 回复
  • Sprite_Moon
    2017-11-17
    太棒了。。解决了[good]
    1 回复
  • flyer17
    2017-11-17
    @贤心
    在table自适应宽度模块示例页面中, 依然出现滚动条. 另外,在项目中的页面,如果改变了某列的宽度百分比,(比如5% --> 6%) 滚动条可能不会出现...



    1 回复
  • Rifty
    2017-11-17
    [ok]
    0 回复
  • [微笑]
    0 回复
  • ok[可怜]
    0 回复
  • [哈欠]
    0 回复
  • [挖鼻]
    0 回复
  • 米童儿
    2017-11-17
    刚还说着这个问题
    0 回复
  • fumeck
    2017-11-17
    6666[哈哈]
    0 回复
  • flyer17
    2017-11-17
    [good]
    0 回复
  • Fufu
    2017-11-17
    先占个前排,再看内容。
    0 回复
  • 小版本持续更新
    0 回复
  • 宵
    2017-11-17
    Table模板里直接写
    <div class="layui-progress layui-progress-big">
    <div class="layui-progress-bar" lay-percent="40%"></div>
    </div>
    都没用,单独拿出来是可以的
    0 回复
  • 往往
    2017-11-17
    我加了,条还在,只是不能滚动了,去不掉啊
    0 回复
  • flyer17
    2017-11-17
    可能是我糊涂, 理解错了?
    0 回复
  • 往往
    2017-11-17
    这样有错吗?
    0 回复
  • flyer17
    2017-11-17
    看上去感觉只多了1px哦, 让人想到了什么? 会不会是小数点后的数凑整了, 导致多了1px?
    [微笑]
    0 回复
  • 贤心
    贤心 (管理员)
    2017-11-17
    @ 在 done 回调里面执行一下 element.init();
    0 回复
  • 芳影暗香
    2017-11-17
    建议 更新版本 不要太快了
    0 回复
  • Jesse
    2017-11-17
    [good]
    0 回复
  • 莫辞
    2017-11-17
    支持一下[太开心]
    0 回复
  • Kael
    2017-11-17
    其实多设置一个自适应的列宽也能解决喔
    0 回复
  • 厉害了我的layui
    0 回复
  • 还有个问题心姐,原本不会出现滚动条,改变每页显示的条数,如果数据有增加的话,就会出现横滚动条了
    0 回复
  • @flyer17 解决了吗?一直会出现水平滚动条? 不是响应式。。
    0 回复
  • @鸭腿儿 对的,你有解决了吗
    0 回复
  • 小Yao刀
    2017-11-23
    我设置的列宽自动分配,但是在改变浏览器宽度之后,列宽还是保持之前的宽度,不会重新按照当前宽度重新分配列宽。resize事件里面重新调用render和reload两种方式都试过了,依然无效,请问该如何解决啊?

    0 回复
  • Core_Lei
    2017-11-23
    @鸭腿儿 table.js源码文件中307行cntrWidth变量应该是获取的父容器的宽度,但是可能因为你的页面结构导致获取的整个网页的宽度,这里看自己情况修改一下源码就行了
    0 回复
本帖已设置禁止回复