文档章节

设置table固定列宽

m
 man_tag
发布于 2015/03/27 19:54
字数 324
阅读 69
收藏 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
jQuery 表格工具集

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

红薯
2010/04/15
9.3K
10
解决Table td设置了相同百分比,由于文字个数不同导致列宽不同问题

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

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

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

晨曦之光
2012/03/09
293
0

没有更多内容

加载失败,请刷新页面

加载更多

记一次winserver2003系统,https无法访问,内存占用持续增加,解决办法

先交代一下环境: win server2003系统,系统装在hyper-v虚拟机里 大概2016年底的镜像,距离今天两年左右 病症:大概9月10号左右用这个镜像还可以访问https,但是今天用这个镜像新装的系统,就...

阳阳露
27分钟前
2
0
jdbc连接orcal数据库

import java.sql.Connection;  import java.sql.DriverManager;  import java.sql.ResultSet;  import java.sql.SQLException;  import java.sql.Statement;    ......

小橙子的曼曼
52分钟前
0
0
Vue学习资料

一直以为Vue是依赖nodejs的。 作为前端也可以耦合性就很低了。 //npm包管理器 进行管理npm install vue//初始化一个项目vue init//本地调试npm run dev//编译完成 ...

大灰狼wow
今天
1
0
fullcalendar重新渲染

uiCalendarConfig.calendars.lesson_calendar.fullCalendar('removeEvents');var ym = uiCalendarConfig.calendars.lesson_calendar.fullCalendar('getView').title;$scope.get_lesson(y......

人来疯啊
今天
1
0
多渠道打包总结

https://www.jianshu.com/p/2130db7584c8 https://blog.csdn.net/u011153817/article/details/50772496...

塔塔米
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部