layui静态表格固定td宽度,table固定td宽度
正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了,
这个博客: https://www.cnblogs.com/kk073000/p/5623942.html
就是在 table 加了 style="table-layout:fixed" 然后就可以给 th 和 td设置固定宽度了,不设置的td宽度会自适应.
不过table的宽度也要设置,通过js计算有多少列,js添加宽度
table-layout有三个属性值:auto、fixed、inherit。
auto:默认,自动表格布局,列宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
fixed:固定表格布局,水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比,允许浏览器更快地对表格进行布局。通过固定表格布局用户代理在接收到第一行后就可以显示表格。
inherit:从父元素继承table-layout属性的值,任何版本的IE都不支持
layui静态表格固定td宽度,table固定td宽度的更多相关文章
- table固定前两列和最后一列,其他滑动显示
网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个table的,此示例只固定了前两列和最后一列,和网上的不太一样. 网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个tab ...
- css table第一列 宽度
table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- js实现table用鼠标改变td的宽度,固定table宽度和高度超过显示点
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- 如何让table中td宽度固定
table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...
- table固定列的宽度,超出部分用…代替(针对普通table和antd)
一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...
- ie固定table单元格宽度
<table border="0" style="width:690px; table-layout:fixed;"> <tr> < ...
- table固定头部,表格tbody可上下左右滑动
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...
- layui数据表格固定头部和第一列、colspan合并列
刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好, ...
随机推荐
- java: (正则表达式,XML文档,DOM和DOM4J解析方法)
常见的XML解析技术: 1.DOM(基于XML树结构,比较耗资源,适用于多次访问XML): 2.SAX(基于事件,消耗资源小,适用于数量较大的XML): 3.JDOM(比DOM更快,JDOM仅使用具体 ...
- APP自动化测试,判断页面与预期是否相同
自动化测试中,有时需要验证页面跳转是否正常 1.选择appium实现,因为要填写appPcakage和appActivity,只能验证一个单独的APP,在自身APP上各个页面是否跳转正常 例如:焦点从 ...
- ftp服务器三种模式
一.匿名开放模式(最不安全) 1.[root@localhost ~]# vim /etc/vsftpd/vsftpd.conf (主配置) anonymous_enable=YES //允 ...
- 【嵌入式开发】树莓派h264实时视频监控
FishXX之前用VLC串流输出视频,在电脑上需要VLC播放器.试了一下,感觉还是有点延时. 今天发现一个更加流畅,也不需要VLC播放器的树莓派远程视频监控方法,直接在浏览器中打开即可. 地址:htt ...
- C#各种委托介绍
委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 一.委托的声明 Delegate Delegate 我们常用到的一种声明 Delegate 至少 ...
- vue ----》实现打印功能
1.安装打印相关依赖 cnpm install vue-print-nb --save 2.安装后,在main.js文件中引入 import Print from 'vue-print-nb' Vue ...
- 2019JAVA第四次实验报告
JAVA实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/29 评分等级 实验四 类的继承 1.实验目的 掌握类的继承方法: 变量的继承和覆盖,方法的继承.重载和 ...
- 从零开始学习GDI+ (三) 画笔与画刷
- yum安装nginx(Centos)
测试人员需要了解Nginx?nginx的别名有很多:中间件,HTTP服务器,代理服务器等,这些名字都是作用的一个体现.在实际项目中,前后端分离,负载均衡等也是通过Nginx实现的,知己知彼,百战百胜. ...
- 集成学习-Adaboost 进阶
adaboost 的思想很简单,算法流程也很简单,但它背后有完整的理论支撑,也有很多扩展. 权重更新 在算法描述中,权重如是更新 其中 wm,i 是m轮样本i的权重,αm是错误率,Øm是第m个基学习器 ...