layui表格支持自适应吗

藏色散人
发布: 2019-07-20 11:53:58
原创
11450人浏览过

layui表格支持自适应吗

layui表格支持自适应吗?

layui表格不支持自适应。比如在页面中添加数据表格时,会发现数据表格每列宽度的大小不能自适应表格,都挤在了一起,看了官方文档后发现,可以为表格设置列宽:

layuiTable.render({
width: 710,
elem: '#tabSta',
url: "/pickTicket/tytr", 
cols: [[
{ field: "ShiftsID", title: "班次ID", hide: true },
{ field: "scheduleCoding", title: "班次", align: "center" },
{ field: "time", title: "时间", align: "center" },
{ field: "carNumber", title: "车辆编号", align: "center" } 
]],
});
登录后复制

但是,问题由来了。当我缩小页面时,表格的宽度还是原来的宽度,不能达到自适应大小的要求。原因在于我刚才给它设置的宽度是固定大小的宽度。

既然上面这个方法不行,那进行第二种解决方法。我在浏览器页面检查发现,当将宽度设置为100%时,数据表格的宽度就能进行自适应大小了。所以,在数据表格的对应代码中给它加上参数done,给数据表格自定义一个样式。

相关代码如下:

飞书多维表格
飞书多维表格

表格形态的AI工作流搭建工具,支持批量化的AI创作与分析任务,接入DeepSeek R1满血版

飞书多维表格 26
查看详情 飞书多维表格
tabrecord =layuiTable.render({
elem: ‘#tabStation’,
url: “/pickTicket/tytr”,
done: function (res, curr, count){
KaTeX parse error: Expected 'EOF', got '}' at position 34: …th", "100%"); }̲, cols: [[ { fi…(“table”).css(“width”, “100%”);
登录后复制

也可以这样写$(“table”).width(“100%”)。

通过这样设置,我们回到浏览器页面进行查看,无论我们怎样缩放页面,数据表格都能自行适应页面大小。

更多Layui相关技术文章,请访问Layui框架教程栏目进行学习!

以上就是layui表格支持自适应吗的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号