oracle 数据库字段html显示正常text显示不全,layui表格字段表格显示不全(自适应)...

本文将为您描述layui表格字段表格显示不全(自适应),具体操作方法:

好记性不如烂笔头。本来就是没什么好记得东西,下次再用时已经想不起来了。

问题如下

ijimruurrwy.png

🐟使用layui表格,表格字段显示不全,如果超出分配的位置,就会显示省略号(如上图),当鼠标放上是可以展开查看全部内容。对于备注等不重要字段这确实是一个不错的方式,但是对于一些单号状态,显示不全就会让人很难受。

问题分析

①我首先想通过样式来让表体内容根据内容大小自动适应宽度,根据内容改变宽度,最后得到效果如下

.layui-table-cell {

width: auto;

}

taglvakvwkp.png

🐟得到的结果,表格的单元格根据表格的内容撑大了,同时也导致了表头和表体不对齐了,因为表格框架都是表头和表体采用的是两个表格来做的,所以就会出现这样情况。

😚为什么表头与表体要用两个表格来做呢?

来自闪存回答:为了实现复杂多级表头(所以也就是很多表格框架可能出现表头与表体对不上的原因)

🐟所以我们该如何让表头和表体对齐呢?

让表头和表体使用同一种模式去计算宽度。也就是定义好宽度,在生成表格的时候都使用这个宽度。

layui做法情况一:字段比较少未超出屏幕时

为了显示美观,这种情况下一般会根据屏幕大小平分到每个单元格上

情况二:超出一屏幕

这是layui字段中可以定义宽度,如果没有定义宽度系统layui有一个默认显示宽度,超出部分也就是如上显示格式。

②bootstrap table 好像可以自适应 (实际上并不是我想要的效果)

mh1cxxxgylj.png

🌂如何让layui table 显示成bootstrap table 的方式

/*layui table 可以设置表格的大小如sm,根据不同大小会定义表格行高度,一行显示,超出就显示省略号

无法改变宽度,就改变他的高度,并且设置换行*/

.layui-table-cell {

height: auto ;

white-space: normal;

}

🐖自适应其实要把内容显示全,但可能想要的效果是宽度上自适应,(由于)在高度上做调整就会让表格的高度不统一,并且一页的数据量也就受到影响。

其实layui是可以把固定宽度设置大一些,但不同电脑的显示的效果可能是不同的。

layui表格字段表格显示不全(自适应)就为您介绍到这里,感谢您关注懒咪学编程c.lanmit.com.

本文地址:https://c.lanmit.com/Webqianduan/htmlyucss/57424.html

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

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

相关文章

使用 VSCode 编写 .NET Core 项目之初体验

注:本文在根据 微软官方文档指导下,根据自己的学习中整理,并不完全照搬文档,但也大体和文档学习路线相似,主要为记录学习过程。 官方学习地址: https://code.visualstudio.com/docs/other/dotnet https://d…

html载入hta文件,HTA文件去除html控件认证和接收命令行参数

一是利用hta 去掉htm的控件验证hta1的代码如下:sample html application oneactivexcontrol.htm代码如下:dim filesystem creates the filesystemobjectset filesystem createobject("scripting.filesystemobject")这样就可以去掉htm的本地验…

sql 同一字段合并

select a.* from (select id,Detail,partId(select cast(partId as char(36)), from (select * from table) as b where b.ida.id for xml path()) ,code from table a group by id,Detail,code) a 转载于:https://www.cnblogs.com/chang1/p/6952715.html

android个人日记本论文,手机app移动开发论文-个人心情日记本的设计实现 毕设论文.doc...

手机app移动开发论文-个人心情日记本的设计实现 毕设论文毕业设计(论文)题 目 个人心情日记本的设计与实现专 业 计算机网络技术班 级 网络学 号姓 名指导教师2016 年 1 月 14 日个人心情日记本【摘要】据准确数据调查,全球人口已超过65亿,其中&#xff…

html模板安装到织梦,织梦网站安装教程 织梦模板通用安装图文教程

织梦模版怎么安装使用呢 下面就把我的经验分享给大家解压文件上传到服务器指定根目录输入主域名访问“例如://www.jb51.net/install”步骤1:勾选同意协议,点击继续按钮。步骤2:检查系统环境和文件权限,确定权限正确才能…

html循环查询的数据,SQL查询遍历数据方法一 [ 临时表 + While循环]

以下以SQL Server 2000中的NorthWind数据库中的Customers表为例,用 临时表 While循环 的方法, 对Customers表中的CompanyName列进行遍历create table #temp(id int identity(1,1),customer nvarchar(50))declare customer nvarchar(50)declare n intdeclare rows i…

atitit.Sealink2000国际海运信息管理系统

atitit.Sealink2000国际海运信息管理系统 操作手冊 文件夹 第一章 使用说明 第一节 系统登录 双击桌面的系统运行程序图标。进入选择数据库的对话框,如图1-1所看到的。选择对应的数据库后,点击【OK】button或在所选数据库上双击。进入登录身份…

金乡高考成绩查询2021,金乡一中举行2021届高三年级一模成绩分析暨表彰大会!现场颁奖...

集思广益查缺补漏,全力以赴保驾护航。为增强备考紧迫性,提高备考有效性,激发师生积极性,2021年3月22日晚,山东省金乡一中2021届高三年级一模成绩分析暨表彰大会,在文峰楼二楼报告厅召开,本次会议…

计算机等级考试初级网络工程师,2019年全国计算机等级考试网络工程师四级,需..._网络编辑_帮考网...

网络工程师考试和计算机等级考试是从属关系。1、计算机等级考试分为四个等级,分别是计算机一级、计算机二级、计算机三级、计算机四级。2、网络工程师考试是计算机四级其中的一个考核项目,所以属于计算机四级。区别:网络工程师考试会分为软件…

匿名类

一、匿名类:[ C# 3.0/.NET 3.x 新增特性 ] 1.1 不好意思,我匿了 在开发中,我们有时会像下面的代码一样声明一个匿名类:可以看出,在匿名类的语法中并没有为其命名,而是直接的一个new { }就完事了。从外部看来…

Java中的方法

方法: 概念: 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程成为方法定义 方法创建后并不是直接可以运行的&#xf…

h标签对html网页的作用,网页H标签SEO价值的说明与举例

H标签是什么?!H标签(全称: Heading标签),是网页HTML中对页面内文本标题或内容进行强调的一种标签。HTML语言一共有六种大小的H标签(H1-H6),其本质上为了呈现网页内容的结构。H标签的系列当中:文字由大至小seo标签&…

MySQL— 进阶

目录 一、视图二、触发器三、函数四、存储过程五、事务 一、视图 视图是一个虚拟表(非真实存在),其本质是【根据SQL语句获取动态的数据集,并为其命名】,用户使用时只需使用【名称】即可获取结果集,并可以将…

HTML中del标记是什么意思,HTML del标记

本文概述HTML 标记用于表示已从文档中删除/删除的文本范围。它用作已删除内容的标记。浏览器通常通过在已删除的文本上打一行来呈现它, 尽管可以使用CSS属性更改它。注意:要标识已删除的文本和插入的文本, 请使用带有的标记, 该标记将在文档中显示已删除和插入的文本…

进制原码反码补码

进制: 概念: 进制:指进位制,是人们规定的一种进位方式,表示某一位置的数看,运算时是逢*进一位。十进制是逢十进一,二进制是逢二进一。以此类推。学习的目的就是为了数据运算过程理解的更加深刻…

SQL Server-服务器迁移之后login登录问题

1.服务器迁移之后,将原来的系统数据库覆盖到新的server,用当前windows account出现无法登录的现象,这时有以下几个方法: (1)在原机器上添加新的账号并赋予管理员的权限,然后迁移到新机器&#x…

计算机桌面图标底部蓝色咋办,电脑桌面的图标底下的文字被蓝色覆盖了怎么处理...

相信很多朋友都遇见过这种情况,发现电脑桌面图标有阴影,文字下面还有衬色,不知道该怎么解决!其实桌面图标的阴影是桌面原始颜色造成的背景,造成这种情况的原因有很多,下面就介绍几种解决方法很简单:方法一&…

什么是位运算符

位运算符&#xff1a; 概念&#xff1a; 位运算符指的是二进制位的运算&#xff0c;先将十进制数转成二进制后再进行运算。 在二进制位运算中&#xff0c;1表示true&#xff0c;0表示false。 <<有符号左移运算&#xff1a;&#xff0c;二进制位向左移动, 左边符号位丢弃…

计算机的桌面教案,《认识计算机桌面》教案(4页)-原创力文档

精品《计算机应用基础》教案课题 认识计算机桌面 课时 1 、2 授课日期通过教学&#xff0c;使学生认识计算机桌面&#xff0c;知道计算机桌面设置的方法&#xff0c;培教学目标养学生学习计算机的兴趣。重 点 重点&#xff1a;鼠标的操作难 点 难点&#xff1a;桌面的设置教、学…

类和面向对象的概念

面向对象&#xff1a; 面向过程 &#xff1a;是一种以过程为中心的编程思想&#xff0c;实现功能的每一步&#xff0c;都是自己实现的 面向对象 &#xff1a;是一种以对象为中心的编程思想&#xff0c;通过指挥对象实现具体的功能 总结&#xff1a;想吃饭自己做就是面向过程&am…