table-layout:fixed 属性的解说,IE、Firefox效果对比详解
来源:互联网 发布:shell cmd python u 编辑:程序博客网 时间:2024/05/16 07:04
[出处] http://www.yici.net/content/text_all/text_0/311_1.html
这篇文章比较实用,解决了一些问题。
table-layout:fixed 属性的解说
如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考Gmail的一些做法,做了几个测试,得出一种解决办法。
例1:(IE浏览器)普通的情况
例1:(IE浏览器)普通的情况
CODE:
<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:
可以看到width=80并没有起作用,表格被字符撑开了。
例2:(IE浏览器)使用样式table-layout:fixed
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:
width=80起作用了,但是表格换行了。
例3:(IE浏览器)使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:width=80起作用了,换行也被干掉了。
例4:(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:不幸发生了,第一个td的nowrap不起作用了
例5:(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:改成百分比,终于搞定了
例6:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果:把例5放到firefox下面,又ft了
例7:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style><table class=tbl border=1 width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
效果:天下终于太平了
例8:(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>
CODE:
<table class=tbl border=1 width=80><tr><td width=20 class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
效果:nowrap又不起作用了
最终,例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。
- [转] table-layout:fixed 属性的解说,IE、Firefox效果对比详解
- table-layout:fixed 属性的解说,IE、Firefox效果对比详解
- table-layout:fixed 属性的解说(文字强制换行)IE与firefox兼容问题
- table-layout的fixed属性
- HTML Table Tr自动换行、宽度自适应:table-layout:fixed 属性的解说
- Firefox下table-layout:fixed无效问题
- css中table-layout:fixed 属性的用法
- css中table-layout:fixed 属性的用法
- table-layout的fixed属性 white-space: nowrap
- css中table-layout:fixed 属性的用法
- 有关表格table-layout:fixed属性的问题
- table-layout属性fixed和auto的区别
- IE的layout属性详解
- IE的layout属性详解
- IE的layout属性详解
- IE的layout属性详解
- IE的layout属性详解
- IE的layout属性详解
- 新的开始--IT世界寻一个立方的存储
- 'sqlplus'不是内部或外部命令,也不是可运行的程序或批处理文件
- 天气系统
- HBase技术介绍
- Android 设定Activity的进入和退出效果
- table-layout:fixed 属性的解说,IE、Firefox效果对比详解
- The Ultimate Wget Download Guide With 15 Awesome Examples
- 【总结】9V电池及其电池扣
- wep认证过程
- 各种数据库对应的jar包
- 在IE浏览器中,点击Dialog中的超链接后,新内容在原Dialog中显示,而非弹出新的页面
- Ext.net设计前台界面
- 黑客基础之DOS命令(目前整理最全的)
- ORM