文档章节

设置table固定列宽

m
 man_tag
发布于 2015/03/27 19:54
字数 324
阅读 98
收藏 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
丰台
私信 提问
【基础】固定列宽的表格及示例演示

引言 对我来说, 有一个非常有用,支持性也很好的 属性,但它却很少为人所知。它改变了表格的渲染方式,并生成一个更加稳定可靠的布局。 它就是: 的缺省值是 ,这个属性值及其效果大家十分熟...

毛三十
08/14
0
0
解决td设置width失效的问题

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

issac宝华
2016/03/15
168
0
解决Table td设置了相同百分比,由于文字个数不同导致列宽不同问题

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

zj_oschina
2014/02/27
0
0
jQuery 表格插件汇总

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

晨曦之光
2012/03/09
321
0
jQuery 表格工具集

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

红薯
2010/04/15
9.4K
10

没有更多内容

加载失败,请刷新页面

加载更多

《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
23分钟前
1
0
java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
39分钟前
2
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0
ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
今天
2
0
HashTable和Vector为什么逐渐被废弃

HashTable,不允许键值为null,还一个就是put方法使用sychronized方法进行线程同步,单线程无需同步,多线程可用concurren包的类型。 如编程思想里面说的作为工具类,封闭性做的不好没有一个...

noob_chr
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部