layui table中的checkbox无法居中显示

最新推荐文章于 2023-01-12 16:06:01 发布
最新推荐文章于 2023-01-12 16:06:01 发布
阅读量600 收藏
点赞数 3
文章标签： html bug layui jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YangXin94/article/details/113136334
版权

问题

在写table的时候 通常都会写一个checkbox 好看并且可以批量删除，但是在写的时候发现checkbox没有居中显示，显得非常的不美观，强迫症看了非常难受，就是下图
在这里插入图片描述

当出现这个错误的时候我也是找了很久 弄着也很难受，但是代码也没错，怎么改都改不回来，今天才发现怎么让他居中

解决方法

在html标签上面添加下面一段话

加上 <!DOCTYPE html > 这句话

在这里插入图片描述

然后就解决了

在这里插入图片描述

这样看着就舒服多了

再见！

漠尘01
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
解决Layui数据表格中checkbox位置不居中的方法
10-18
今天小编就为大家分享一篇解决Layui数据表格中checkbox位置不居中的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui的table单击行勾选checkbox功能方法
10-18
在本文中，我们将深入探讨如何在layui框架中实现表格（table）单击行时自动勾选或取消勾选复选框（checkbox）的功能。layui是一个轻量级的前端UI框架，提供了一系列丰富的组件，包括表格，用于数据展示和交互。下面...
【转】解决Layui数据表格中checkbox位置不居中
夕慕慕的博客
09-27 1803
1.情景 使用方法渲染的方式生成数据表格，添加了checkbox，但发现checkbox位置不居中，如下图所示    2.解决办法 通过layui官方社区，找到如下代码，只需要添加如下样式即可解决 &lt;style&gt; .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; t...
解决Layui数据表格中checkbox位置不居中
XCMercy
01-20 8550
1.情景 使用方法渲染的方式生成数据表格，添加了checkbox，但发现checkbox位置不居中，如下图所示 2.解决办法 通过layui官方社区，找到如下代码，只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: trans
layui数据表格checkbox无法居中解决方案
Sudeman的博客
01-12 225
layui数据表格
Layui数据表格中checkbox位置不居中
rocrunwang的博客
09-20 446
layUI checkbox居中
layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
01-06
在本文中，我们将深入探讨如何在layui框架中创建一个表格，其中某一列显示为复选框（checkbox），以便实现单选功能。layui是一款基于前端的轻量级组件库，提供了丰富的UI组件，包括表格（table）、按钮、表单元素等...
layui默认选中table的CheckBox复选框方法
10-16
总结来说，layui提供了一种灵活的方式来处理table中的复选框选中状态。你可以根据实际需求选择合适的方法，或者结合两者，实现更复杂的逻辑。在使用过程中，需要注意的是，确保在设置选中状态时，复选框的DOM元素...
td中checkbox与文字不齐解决办法.checkbox{vertical-align:middle; margin-top:0;}
kingisking1的专栏
07-16 4763
使用css式样的复选框默认的复选框在实际运用中会出现firefox与ie效果不同的情况这时候需要.comm_check{margin:2px 2px 0 30px; float:left; vertical-align:middle;margin-top:3px!important ;margin-top:0px;}*格式：适用于ff 的配置   !important ;  适用于ie6 的
解决LayUI数据表格复选框不居中显示的问题
12-13
解决LayUI数据表格复选框不居中显示的问题 最后在样式文件中增加如下代码： .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 完美解决： 以上这篇解决LayUI数据表格复选框不居中显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
layui复选框居中
banfangya8484的博客
09-17 726
layui表格复选框有时候会出现布局中现象,只需要把style放入页面中就可以实现复选框居中了. 作为一个年青的程序员,不敢说太多的话,还是努力给大家多发些有用的文章吧! <style> .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(-...
LayUI数据表格复选框显示不居中问题
我的博客
11-15 329
LayUI数据表格复选框显示不居中问题 样式（layui.css）文件中增加： .layui-table-cell .layui-form-checkbox[lay-skin="primary"] { top: 50%; transform: translateY(-50%); }
layui 复选框 取值 回显 及一些小bug问题
Tenderness104的博客
08-10 852
一： html里放一个框 <div class="layui-form-item" pane> <label class="layui-form-label">多选方案类型</label> <div class="layui-input-block"> <input type="checkbox" name="DXType1" lay-f
layui中table的checkbox对不齐问题解决
qq_35086941的博客
10-14 618
layui中table的checkbox对不齐问题
table中checkBox对齐问题
坐看云起云落。
05-24 5021
table中实现将多行多列的checkBox对齐
checkbox和后面文字无法居中对齐的解决方案
打杂人
04-15 7433
制作前端页面时，表单的页面中都存在表单元素与提示文字无法对齐的问题。下面是针对这一问题的解决方案： 先上结果图看效果,吼吼~     最上面两个是经过css处理后的效果，已经居中对齐了哦~，最后一个是没有处理的效果，明显没有对齐。解决的关键是vertical-align：middle属性，一定要给input标签和文字的标签同时加上该属性。对于纯英文的内容而言，这样就可以了，但是对于
Vue + element 全局使table复选框位置居中
qq_43145310的博客
04-22 2154
首先添加一个base.css文件 .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { padding: 0, } main.js import ".components/base.css" 这样所有table就全局居中了。
使用layui后table中的checkbox总是无法对齐
qq_29072049的博客
08-08 2145
<style> .layui-icon{ margin-top: 20px; } .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ transform: translateY(-30%); } </style> 参考自https://fly.layui.com/jie/18395/ ...
layui table切换html,layui table中渲染html对象
最新发布
05-23
要在layui table中切换HTML，可以使用laytpl模板引擎来渲染HTML对象。下面是一个示例代码，展示如何在layui table中渲染HTML对象： ```javascript layui.use(['table', 'laytpl'], function(){ var table = layui.table; var laytpl = layui.laytpl; //定义表格数据 var data = [ {id: 1, name: '张三', html: '<a href="#">点击链接</a>'}, {id: 2, name: '李四', html: '<button class="layui-btn layui-btn-primary">点击按钮</button>'}, {id: 3, name: '王五', html: '<input type="checkbox" name="test" lay-skin="primary" title="选项1">'} ]; //定义表格列 var cols = [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'html', title: 'HTML', templet: function(d){ //使用laytpl渲染HTML对象 var html = laytpl(d.html).render(); return html; }} ]]; //渲染表格 table.render({ elem: '#test', data: data, cols: cols }); }); ``` 在上面的示例中，我们在表格数据中定义了一个`html`字段，用于存储HTML对象。然后在表格列中，使用`templet`属性来定义一个函数，该函数会使用laytpl模板引擎来渲染HTML对象。最后，调用`table.render`方法来渲染表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值