正在做一个项目,要求数据表的列是不固定的,有可能是有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宽度的更多相关文章

  1. table固定前两列和最后一列,其他滑动显示

    网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个table的,此示例只固定了前两列和最后一列,和网上的不太一样. 网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个tab ...

  2. css table第一列 宽度

    table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...

  3. 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  4. js实现table用鼠标改变td的宽度,固定table宽度和高度超过显示点

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  5. 如何让table中td宽度固定

    table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

  6. table固定列的宽度,超出部分用…代替(针对普通table和antd)

    一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...

  7. ie固定table单元格宽度

    <table border="0" style="width:690px; table-layout:fixed;"> <tr> < ...

  8. table固定头部,表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...

  9. layui数据表格固定头部和第一列、colspan合并列

    刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好, ...

随机推荐

  1. websocket服务器推送 (node+express+vue+socket)

    简介: 此项目需要懂一点node.express 功能: 1.前端用户登录,查看服务端推送的消息,用户只能在一个地方登录,也就是单点登录 2.服务端首先登录,上传需要推送的信息文本,后台读取文本后,存 ...

  2. keepalived 容器在宿主机重启后无法启动问题:报错:daemon is already running

    初步猜测原因是:keepalived容器内的keepalived.pid文件在keepalived容器非正常退出时,没有正确删除,造成第二次启动时容器检查到pid文件已经存在,认为该进程已经存在,因为 ...

  3. 使用lombok.Data编译时无法找到get/set方法

    我的IDEA版本是2019.2 在使用IDEA创建了一个SpringBoot项目,其中一个实体类使用了@Data注解,但是在Service中调用的时候找不到get/set方法. 检查步骤: 1.在St ...

  4. 2019CCPC厦门游记

    距离上次2018CCPC吉林打铁一年有余,这次的厦门也是我们team拿到的第一块区域赛牌子,写一篇博客留念一下QAQ. 作为弱校的菜鸡队,我们提前两天就来到厦门,不得不说刚到厦门的两天还是很快乐的,住 ...

  5. trigraph

    trigraph是c/c++对之前键盘无法输入一些符号而做出的补充设计,将以下字符用其他三个字符来代替 # ??= \ ??/ ^ ??' [ ??( ] ??) { ??< } ??> ...

  6. mknod创建设备(加载新的设备驱动时候,通常会用到此命令)

    mknod - make block or character special filesmknod [OPTION]... NAME TYPE [MAJOR MINOR] option 有用的就是- ...

  7. spring boot 是如何利用jackson进行序列化的?

    接上一篇:spring boot 是如何利用jackson进行反序列化的? @RestController public class HelloController { @RequestMapping ...

  8. for XML path 使用技巧

    FOR XML PATH 是sqlserver数据库的语法,能将查询出的数据转换成xml格式的数据. 首先,我们来看一个正常的查询: SELECT TOP 2 id, name,crDate FROM ...

  9. zabbix修改默认字体

    在zabbixweb界面里有时候显示界面为框框 所以修改默认字体 现在windows里  随便找个字体: win+R  搜fonts 然后随便复制了一个字体,传到zabbix服务器里 cp calib ...

  10. 013-zabbix trapper方式监控

    zabbix获取数据时有时会出现超时,如果一些数据需要执行比较长的时间才能获取的话,那么zabbix会出现异常,考虑到这种情况,zabbix增加了Trapper功能,客户端自己提交数据给zabbix. ...