文档章节

设置table固定列宽

m
 man_tag
发布于 2015/03/27 19:54
字数 324
阅读 38
收藏 0
点赞 0
评论 0

页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。

解决办法: 

1.table 设置 宽度,绝对宽度和相对都可以 

table-layout:fixed ; 
设置了这个属性,其余所有td都是相同的宽度。 

这样操作之后,table是宽度固定了,但是里面的文章如果很长,文字会覆盖 

解决办法: 

在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可以将超出内容设为隐藏,并且用省略号代替: 

在td上面加 

复制代码

代码如下:


overflow:hidden; 
white-space:nowrap; 


text-overflow:ellipsis;(目前仅在IE8测试通过) 
推荐方法(2013-11-14 by 张雷)用div控制td的内容 

在TD中加 

(1)超过宽度和高度文字会自动隐藏 

复制代码

代码如下:


<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 


(2)设置了td的宽度超过长度自动换行 

复制代码

代码如下:


<td><div style="width:100px;word-wrap:break-word;" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
</td> 


© 著作权归作者所有

共有 人打赏支持
m
粉丝 0
博文 12
码字总数 8419
作品 0
丰台
解决td设置width失效的问题

使用的css里的两个属性white-space/word-break,设置td是否换行。 width会失效是因为有些浏览器,默认td是的内容是超出宽度即换行的(比如 火狐),有些即是默认不换行的(比如 谷歌) 固定t...

issac宝华 ⋅ 2016/03/15 ⋅ 0

jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯 ⋅ 2010/04/15 ⋅ 10

解决Table td设置了相同百分比,由于文字个数不同导致列宽不同问题

问题:上图中红色与黄色背景的列都是设置了同样的百分比宽度,但是由于黄色列的文字内容比红色的多,导致table在展示时宽度不一 解决方法: 将table加上属性 table-layout:fixed; 搞定 原因:...

zj_oschina ⋅ 2014/02/27 ⋅ 0

jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

强大的 vuejs table 组件--vue-easytable

vue-easytable 介绍 基于 vue2.x 的table组件 API & 实例 http://doc.huangsw.com/vue-easytable/app.html#/table 功能 自适应,可以随着浏览器窗口改变自动适应 固定列,表头固定 默认支持列...

huangsw ⋅ 2017/09/04 ⋅ 11

vue-easytable —— 强大的 vuejs table 组件

vue-easytable 是基于 vue2.x 的 table 组件。主要功能:自适应,可以随着浏览器窗口改变自动适应;固定列,表头固定;列宽拖动(默认支持);排序,支持单个、多个字段排序;自定义列、自定...

王练 ⋅ 2017/09/05 ⋅ 0

CSS !important作用

important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。语法格式box{color:red !important;} ,即 写在定义的最后面。 最重要的一点是:IE一直都不支持这个语法,而其他的浏览器...

crazyinsomnia ⋅ 2010/03/29 ⋅ 0

18个最好的 jQuery 表格插件

我们一般使用HTML表格来显示数据,我们都知道div更容易设计,更灵活。但是现在你使用这些精彩的jQuery表格插件,将更简单、灵活、更多风格。 本篇文章介绍了18个非常不错的jQuery 表格插件,...

老枪 ⋅ 2011/04/06 ⋅ 7

表格展示、多余数据省略、鼠标悬浮显示教程

本人非专业前端,写的不好还望多多指教 1.首先需要将需要这样处理的td,th设置一下样式 text-align: center; /设置水平居中/ vertical-align: middle; /设置垂直居中/ white-space: nowrap; ...

pan_haufei的博客 ⋅ 2017/12/14 ⋅ 0

JqGrid冻结列实现

jqgrid冻结列的实现需要设置参数 1.colModel的行要加上属性: frozen:true 2.加载jqgrid设置属性:shrinkToFit: false // ture: 按比例初始化列宽度 false: 列宽度使用colModel指定的宽度 --...

Wacher ⋅ 2016/12/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Greys Java在线问题诊断工具

Greys是一个JVM进程执行过程中的异常诊断工具。 在不中断程序执行的情况下轻松完成JVM相关问题排查工作 目标群体 有时候突然一个问题反馈上来,需要入参才能完成定位,但恰恰没有任何日志。回...

素雷 ⋅ 28分钟前 ⋅ 0

git从远程仓库拉取代码的常用指令

一种(比较麻烦的)拉代码的方法 git clone //克隆代码库,与远程代码库的主干建立连接,如果主干已经在就不用再clone啦,克隆路径为当前路径下的新创建的文件夹 git checkout -b //本地建立...

Helios51 ⋅ 42分钟前 ⋅ 0

005. 深入JVM学习—Java堆内存参数调整

1. JVM整体内存调整图解(调优关键) 实际上每一块子内存区域都会存在一部分可变伸缩区域,其基本流程:如果内存空间不足,则在可变的范围之内扩大内存空间,当一段时间之后,内存空间不紧张...

影狼 ⋅ 47分钟前 ⋅ 0

内存障碍: 软件黑客的硬件视图

此文为笔者近日有幸看到的一则关于计算机底层内存障碍的学术论文,并翻译(机译)而来[自认为翻译的还行],若读者想要英文原版的论文话,给我留言,我发给你。 内存障碍: 软件黑客的硬件视图...

Romane ⋅ 今天 ⋅ 0

SpringCloud 微服务 (七) 服务通信 Feign

壹 继续第(六)篇RestTemplate篇 做到现在,本机上已经有注册中心: eureka, 服务:client、order、product 继续在order中实现通信向product服务,使用Feign方式 下面记录学习和遇到的问题 贰 or...

___大侠 ⋅ 今天 ⋅ 0

gitee、github上issue标签方案

目录 [TOC] issue生命周期 st=>start: 开始e=>end: 结束op0=>operation: 新建issueop1=>operation: 评审issueop2=>operation: 任务负责人执行任务cond1=>condition: 是否通过?op3=>o......

lovewinner ⋅ 今天 ⋅ 0

浅谈mysql的索引设计原则以及常见索引的区别

索引定义:是一个单独的,存储在磁盘上的数据库结构,其包含着对数据表里所有记录的引用指针. 数据库索引的设计原则: 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索...

屌丝男神 ⋅ 今天 ⋅ 0

String,StringBuilder,StringBuffer三者的区别

这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面。 首先说运行速度,或者说是, 1.执行速度 在这方面运行速度快慢为:StringBuilder(线程不安全,可变) > StringBuffer...

时刻在奔跑 ⋅ 今天 ⋅ 0

java以太坊开发 - web3j使用钱包进行转账

首先载入钱包,然后利用账户凭证操作受控交易Transfer进行转账: Web3j web3 = Web3j.build(new HttpService()); // defaults to http://localhost:8545/Credentials credentials = Wallet......

以太坊教程 ⋅ 今天 ⋅ 0

Oracle全文检索配置与实践

Oracle全文检索配置与实践

微小宝 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部