正在做一个项目,要求数据表的列是不固定的,有可能是有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. 龙芯软硬件培训个人总结-day1

    第一天主要针对的硬件设计,推他们年底要量产的3A4000+7A1000.这里我只记录下自己关注的几个点. 1,3A4000/3B4000处理器 支持256位向量指令:    对处理器封装进行了优化,不 ...

  2. olap和Oltp(转)

    OLAP和OLTP的区别(基础知识) 联机分析处理 (OLAP) 的概念最早是由关系数据库之父E.F.Codd于1993年提出的,他同时提出了关于OLAP的12条准则.OLAP的提出引起了很大的反响, ...

  3. 数位dp(二进制01问题)

    http://poj.org/problem?id=3252 题意:给你一个区间,求区间有多少个满足条件的数.条件是:把该数转为二进制后,如果0的数量大于等于1的数量,则为满足条件的数量. 题解:数位 ...

  4. Codeforces893F_Subtree Minimum Query

    题意 给定一棵树和根,每个点有点权,强制在线询问\(x\)子树里离\(x\)距离不超过\(k\)的最小点权. 分析 权值线段树合并的套路题,dfs,以深度作为下标,点权作为值,对每个点建立一颗权值线段 ...

  5. Timetable CodeForces - 946D (区间dp)

    大意: n天, 每天m小时, 给定课程表, 每天的上课时间为第一个1到最后一个1, 一共可以逃k次课, 求最少上课时间. 每天显然是独立的, 对每天区间dp出逃$x$次课的最大减少时间, 再对$n$天 ...

  6. RabbitMQ入门教程(二):简介和基本概念

    原文:RabbitMQ入门教程(二):简介和基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...

  7. Asp.net Core中文转换成拼音

    一.概述 之前使用.net framework,可以使用Microsoft Visual Studio International Feature Pack 1.0 进行转换,现在使用asp.net ...

  8. sql server 符号函数sign

    --SIGN(x)返回参数的符号,x的值为负.零或正时,返回结果依次为-1.0或1 示例:select SIGN(-21), SIGN(0), SIGN(21) 结果:-1  0  1

  9. node.js 设置静态文件托管

    1.在app.js文件中设置静态文件托管 /*应用程序入口文件*/ /*加载express模块*/ var express = require('express'); /*加载模板处理模块*/ var ...

  10. 1.javascript知识点总结

    1.写javaScript的三种方式: 2.写javaScript的注意事项: ①严格区分字母的大小写: ②空格和换行.多余的空格会被忽略,可以将一行代码分成多行写: ③分号作为一个语句的结束: ④单 ...