layui框架实战案例(21):layui table单元格显示图片导致复选框冗余的解决方案

在这里插入图片描述

图片自适应表格CSS

为防止单元格内的图片不能正常显示,需本地重写CSS。

/*layui-table图片自适应*/
.layui-table-cell {height: auto;line-height: 20px;}.layui-table-cell img {height: 50%;max-width: 50%;
}

列代码

, cols: [[{type: 'checkbox',fixed:'left', width: 80}, {field: 'but_id', title: 'ID', sort: true, hide: true}, {field: 'but_serial', title: '编号', sort: true}, {field: 'but_name', title: '姓名', sort: true}, {field: 'but_phone', title: '联系电话', sort: true}, {field: 'but_url', title: '工作照片', align: 'center', width: 120, templet: function (d){return '<div οnclick="previewImg(\'' + d.but_url + '\');" style="cursor: pointer;"><img src="' + d.but_url + '" width="30" height="50"/></div>';}}, {field: 'lock', title: '操作', templet: '#checkboxTpl', unresize: true, align: 'center', width: 200}]]

在layui中,fixed:'left’是一个属性,用于规定表格列的固定位置。当这个属性被设置为’left’时,它表示表格的这一列将会被固定在左侧,即无论用户如何滚动页面,这一列都会保持在左侧。类似于其他的CSS样式属性,可以通过这个属性来控制表格的布局和用户的视觉体验。需要注意的是,如果需要固定的是两个以上的列,那么前面的每一列都需要加上fixed这个属性。

解决方案

去除复选框的fixed属性即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

非科班,补基础

大家好&#xff0c;我是大彬~ 今天跟大家分享知识星球小伙伴关于【非科班转码如何补基础】的提问。 往期星球提问整理&#xff1a; 读博&#xff1f;找工作&#xff1f; 性格测试真的很重要 想找一份实习工作&#xff0c;需要准备什么 球友提问&#xff1a; 大彬大佬&#xf…

Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用

之前一直naive-ui搭配使用的是xicons&#xff0c;后来发现Iconify支持的图标合集更多&#xff0c;因此转而使用Iconify。 与FontAwesome不同的是&#xff0c;Iconify配合Icones相当于是一个合集&#xff0c;Iconify提供了快捷引入图标的方式&#xff0c;而Icones是一个大的图标…

数据结构与算法-(10)---列表(List)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

力扣每日一题52:N皇后问题||

题目描述&#xff1a; n 皇后问题 研究的是如何将 n 个皇后放置在 n n 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回 n 皇后问题 不同的解决方案的数量。 示例 1&#xff1a; 输入&#xff1a;n 4 输出&#xff1a;2 解释&#…

【微信小程序】后台数据交互于WX文件使用

目录 一、前期准备 1.1 数据库准备 1.2 后端数据获取接口编写 1.3 前端配置接口 1.4 封装微信的request请求 二、WXS文件的使用 2.1 WXS简介 2.2 WXS使用 三、后台数据交互完整代码 3.1 WXML 3.2 JS 3.3 WXSS 效果图 一、前期准备 1.1 数据库准备 创建数据库&…

TX Text Control.NET 32.0 For WPF

TX Text Control 支持VISUAL STUDIO 2022、.NET 5 和 .NET 6 支持 .NET WPF 应用程序的文档处理 将文档编辑、创建和 PDF 生成添加到您的 WPF 应用程序中。 视窗用户界面 功能齐全的文档编辑器 TX Text Control 是一款完全可编程的丰富编辑控件&#xff0c;它在专为 Visual Stu…

同步网盘选择指南:哪个同步网盘更好用?

同步盘是当下热门的云存储服务之一&#xff0c;它可以将您的文件在不同设备之间进行同步&#xff0c;使您可以随时随地访问和共享您的文件&#xff0c;因此受到了许多用户的喜爱。 一、什么是同步盘 首先到底什么是同步盘&#xff1f;同步盘是指一种云存储服务&#xff0c;它…

零基础Linux_20(进程信号)内核态和用户态+处理信号+不可重入函数+volatile

目录 1. 内核态和用户态 1.1 内核态和用户态概念 1.2 内核态和用户态转化 2. 处理信号 2.2 捕捉信号 2.2 系统调用sigaction 3. 不可重入函数 4. volatile关键字 5. SIGCHLD信号&#xff08;了解&#xff09; 6. 笔试选择题 答案及解析 本篇完。 1. 内核态和用户态…

【吞噬星空】又被骂,罗峰杀人目无法纪,但官方留后手,增加审判戏份

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫吞噬星空资讯。 吞噬星空动画中&#xff0c;罗峰复仇的戏份&#xff0c;简直是帅翻了&#xff0c;尤其是秒杀阿特金三大巨头&#xff0c;让人看的也是相当的解气&#xff0c;相当的爽&#xff0c;一点都不拖沓&#x…

fastadmin笔记,fastadmin表格功能

fastadmin笔记 官方文档请到&#xff1a; https://ask.fastadmin.net/article/323.html自行查阅 1、默认有个切换功能。 浏览模式可以切换卡片视图和表格视图两种模式&#xff0c;如果不需要此功能 在该控制器对应的js 文件中添加上showToggle:false即可。 2、导出功能 …

linux基础IO

文章目录 前言一、基础IO1、文件预备知识1.1 文件类的系统调用接口1.2 复习c语言接口 2、文件类的系统调用接口2.1 open系统调用2.2 close系统调用2.3 write系统调用2.4 read系统调用 3、文件描述符3.1 文件描述符fd介绍3.2 文件描述符fd分配规则与重定向3.3 重定向原理3.4输入…

armbian安装gcc、g++

文章目录 安装GCC安装G 安装GCC 打开终端&#xff0c;更新软件包列表&#xff1a; sudo apt update安装GCC&#xff1a; sudo apt install gcc如果需要安装特定版本的GCC&#xff0c;可以使用以下命令&#xff1a; sudo apt install gcc-<version> # sudo apt install g…

小白也能成功搭建网站

随着互联网的快速发展&#xff0c;拥有一个个人网站已经成为了越来越多人的追求。然而&#xff0c;对于编程知识不太了解的小白来说&#xff0c;搭建个人网站似乎是一件很困难的事情。但是&#xff0c;现在有了一个不需要编程的方法&#xff0c;小白也能够轻松建立自己的个人网…

如何利用IP定位技术进行反欺诈?

网络欺诈风险是指在互联网和数字领域中&#xff0c;存在各种类型的欺诈活动&#xff0c;旨在欺骗个人、组织或系统以获得非法获益。以下是一些常见的网络欺诈风险类型&#xff1a; 身份盗用&#xff1a;这是一种欺诈行为&#xff0c;涉及盗取他人的个人身份信息&#xff0c;如姓…

Vercel 如何使用 Amazon EventBridge 调度器在2个月内发布 Cron 作业

Vercel 使用 Amazon EventBridge 调度器实施 Cron 作业&#xff0c;使他们的客户能够大规模创建、管理和运行计划任务。该功能很快就获得了广泛采用&#xff0c;发布后仅几个月&#xff0c;每周 cron 调用次数就超过 700 万次。本文将介绍他们是如何取得这一成就的&#xff0c;…

回归预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-GRU贝叶斯优化门控循环单元回归预测。基于贝…

单片机入门后该怎么学习进一步提升?

单片机入门后该怎么学习进一步提升&#xff1f; 可以将你目前会的单片机基础先整理一下&#xff0c;你看看运用这些基本的外设或者一些入门知识能做个什么东西&#xff0c;最近很多小伙伴找我&#xff0c;说想要一些单片机资料&#xff0c;然后我根据自己从业十年经验&#xff…

系列十四、Redis的集群(一)

一、是什么 1.1、概述 由于数据量过大&#xff0c;单个master-slave模式难以承担&#xff0c;当出现master节点故障的一瞬间&#xff0c;哨兵重新选举新的master节点之前&#xff0c;这一小段时间将会导致Redis服务不可用&#xff0c;因此需要对多个master-slave主从复制集进行…

Kafka与MySQL的组合使用

根据上面给出的student表&#xff0c;编写Python程序完成如下操作&#xff1a; &#xff08;1&#xff09;读取student表的数据内容&#xff0c;将其转为JSON格式&#xff0c;发送给Kafka&#xff1b; 创建Student表的SQL语句如下&#xff1a; create table student( sno ch…