layui解决数据表格右侧有空白现象

不念不忘少年蓝@ 2023-10-04 12:32 36阅读 0赞

**问题如图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]  
**解决方法：**  
①一点点设置各个field对应的width，缺点：麻烦，优点：样式可根据自己需要调整，完美。

cols: [
                [
                   {
        field: 'id', title: 'ID', width: '5%',hide:true,align:'center'},
                   {
        field: 'name', width: '150', title: '监控名称',align:'center'},
                   {
         fixed: 'right', align: 'center', width: 280, title: '操作', toolbar: '#barTool' }
                ]
             ],

②直接在回调函数done中加入一段代码即可自动补全空白，优点：快速有效，缺点：样式可能不尽人意。

,done: function (res, curr, count) {
        
       		$("table").css("width","100%");
       }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210506114510187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui解决数据表格右侧有空白现象

问题如图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

不念不忘少年蓝@/ 2023年10月04日 12:32/ 0 赞/ 37 阅读

相关 layui数据表格自动换行解决办法

问题背景不是所有的列表都是一行就搞定，如果遇到`layui.table`需要支持`自动换行`的情况，这个时候就需要改造layui的数据表格，支持自动换行。想要实现的

墨蓝/ 2023年03月04日 09:06/ 0 赞/ 1 阅读

相关 Layui数据表格换行

1.添加<br> 2.添加样式 .layui-table-cell { height: auto; } 效果如下： ![70][] [70

小咪咪/ 2022年05月20日 09:07/ 0 赞/ 497 阅读

相关 LayUi 之数据表格

我们在平常做项目的过程中，如果想使用数据表格的话，一般都是动态数据的处理，而且一般如果我们数据表格不加分页的话，还是很容易做的，但是加了数据表格的话，如果是前端分页，那也好说，

￡神魔★判官ぃ/ 2022年05月20日 04:27/ 0 赞/ 355 阅读

相关《layUI 的数据表格》

1.Action private t_book_vo bookvo = new t_book_vo(); private bookDao_vo bdv =

亦凉/ 2022年04月18日 05:24/ 0 赞/ 525 阅读

相关 easyui datagrid列表右侧空白解决办法

easyui提供的datagrid控件，默认情况下，即使列表宽度设置成100%，右侧仍然会有一个空白，如下所示： <!doctype html> <html>

我不是女神ヾ/ 2022年04月18日 02:18/ 0 赞/ 339 阅读

相关 Layui数据表格的构建

开发工具与关键技术：VS ；单表的linq语句作者：刘佳明撰写时间：2019年 4 月 14 日（注：源代码及资料，插件来源于老师的课件！！！！）构建数据

客官°小女子只卖身不卖艺/ 2022年02月20日 15:21/ 0 赞/ 419 阅读

相关 layui数据表格：批量删除

前端页面 <form> <input type="button" value="批量删除" class="btn" style="width: 50p

待我称王封你为后i/ 2022年02月13日 06:43/ 0 赞/ 575 阅读

相关 layui数据表格的使用

代码清单 welcom.html <!DOCTYPE html> <html> <head> <meta charset="utf-8

矫情吗；*/ 2021年12月10日 03:35/ 0 赞/ 456 阅读

相关 layui数据表格

快速使用创建一个table实例最简单的方式是，在页面放置一个元素 `<table id="demo"></table>`，然后通过 table.render() 方法指

约定不等于承诺〃/ 2021年06月24日 16:11/ 0 赞/ 825 阅读