table-layout : auto | fixed 参数:auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度。
设置或检索表格的布局算法。
对应的脚本特性为tableLayout。
示例:
table { table-layout: auto; }
为了让表格布局固定住,我们需要table-layout:fixed。假设没有fixed,把你的分辨率减小到一定程度,你会发现white-space: nowrap是不会生效的。
技巧:为了使表格能够适应液态布局(liquid layout,即可伸缩性),不建议你为表格设置绝对宽度,使用相对宽度如百分比是不错的选择。另外,把宽度相对固定的内容(比如时间格式)格设置绝对宽 度,非固定的内容格不设置任何宽度,只需给予其设置white-space: nowrap,虽然在小分辨率的情况下会溢出,但依据某些观点看来,这比折行更美观。
说明:
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度:
使用 col 或 colGroup 对象的宽度( width )属性信息。
使用表格第一行内的单元格的宽度( width )信息。
依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度,内容将会被换行。假如无法换行,则内容会被裁切。假如此属性被设置为 fixed ,则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了,那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。
注意到以下几点:
1,你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。
2,设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
3,设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
----------------------------------------------------
这个特性对于长表格显示速度及效果来说时非常有用的。可以用来改善表格性能!
对于table元素
IE浏览器
使用 table-layout:fixed;强制table的宽度,多余内容隐藏
如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情 况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考 Gmail的一些做法,做了几个测试,得出一种解决办法。
例1:(IE浏览器)普通的情况
<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:
可以看到width=80并没有起作用,表格被字符撑开了。
例2:(IE浏览器)使用样式table-layout:fixed
<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
<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
<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
<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
<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
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>
<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都可以完美解决页面强制换行问题的解决方案。
发表评论
-
基于脚本的动画的计时控制(“requestAnimationFrame”)(转载)
2014-03-04 19:12 939Internet Explorer 10 和使 ... -
IE11开发人员工具:UI响应工具详解
2014-02-27 18:33 888我讨厌debug,相信也没多少开发者会喜欢。但是当代码出 ... -
IE11开发人员工具:内存分析工具详解
2014-02-27 18:32 1372上篇我们跟大家介绍 ... -
E6与location.hash和Ajax历史记录 (转载)
2014-02-26 12:23 516为了在IE6中改变hash来保留历史记录实现ajax的前进 ... -
MIME Types(转载)
2013-12-31 10:20 604MIME Types - Complete List ... -
iframe历史记录问题(转载)
2013-10-17 10:21 1250在做页面统计的时候 ... -
前端类库精选(转)
2013-05-11 00:57 0优秀的前端类库,自己平时遇见了,这里Mark一下。 1、m ... -
10个chrome console实用小技巧(转)
2013-05-09 10:56 10201. 基本输出 让我们先从最常见的console.l ... -
CSS3那些不为人知的高级属性(转)
2013-04-19 13:35 900原文:CSS的未来:一些 ... -
JavaScript 时间、格式、转换及Date对象总结(转)
2013-04-10 14:49 683悲剧的遇到问题,从前台得到时间,“Tue Jan 29 16 ... -
如何制作一个可及性强(accessible)的网页弹框(转载)
2013-04-02 16:18 779英文原文:Making an accessib ... -
JavaScript MVC js也mvc(转载)
2013-03-16 23:59 666JavaScript MVC 中文:http://blog ... -
SUBLIME TEXT 2 设置文件详解
2012-12-27 11:21 1018Sublime Text 2是那种让人会一眼就爱上的编辑 ... -
两个按位非操作与Math.floor操作(译)
2012-12-10 18:17 918位操作符在我们编码过程中是容易被遗忘的,可能更多的源于我们 ... -
img中src为空的影响
2012-11-26 23:32 0这是我们经常能遇到的代码,可以直接用html标签或者Java ... -
IE6下position定位子元素溢出,父元素被撑开的解决思路。(转)
2012-11-13 18:04 1607在一些被常规的页面布局当中,我们常常需要通过positi ... -
chrome developer tool 调试技巧(转)
2012-11-12 13:16 813这篇文章是根据目前 chrome 稳定版(19.0.10 ... -
你清楚jquery是如何清除ajax缓存的吗?(转)
2012-11-11 11:19 1024大家都知道万恶的IE在ajax中往往只读取第一次ajax ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率 In JavaScript(转)
2012-11-10 23:33 685随着WebApp突飞猛进的发展,Javascript写的 ... -
Javascript基础
2012-11-10 23:25 0原文:http://bonsaiden.githu ...
相关推荐
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
但这样就会出现问题: 如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式参差不齐,很难看。 很容易想到的解决方法是,禁用文本换行: white-space:nowrap; overflow:hidden; So ...
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
在原bootstrap-table-fixed-columns的基础上,解决了冻结列后,排序失效、列宽错位和合并行失效问题
如有使用疑问,联系本人,如有使用疑问,
<title>ASP简易留言板--ASP simple postboard v1.21 A:link,A:active,A:visited{TEXT-DECORATION:...td { table-layout:fixed; word-break :break-all; font-family:"宋体"; font-size: 12px; line-height: 15px; }
qq论坛源码,含图标,* 基本定义 */ td,body { font-size:12px line-height:20px color:#222222 } ul,li,form,img {margin:0 padding:0 list...TABLE.TableFixed { table-layout:fixed } XMP { display:none }
bootstrap-table-fixed-columnsbootstrap-table-fixed-columnsbootstrap-table-fixed-columns
设置table 的 style=table-layout:fixed; 然后设置td的 style=word-wrap:break-word; 即可 复制代码代码如下:<table xss=removed border=”1″ cellspacing=”0″ cellpadding=”0″ width=”200″> <tbody> <tr> ”...
bootstrap-table样式固定列js插件,在网上看到下载资源比较少,免费提供给大家下载使用,方便开发进度。
table-layout:fixed; } ***本文关键词:table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法 tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用...
datagrid 与gridview的区别
script type =" text/javascript " src =" bower_components/angular-fixed-table-header/src/fixed-table-header.min.js " > </ script > 在应用程序中包含fixed.table.header模块作为依赖项。 angular...
最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也是bootstrap-table作者写的)能实现冻结效果,但带来了其他问题,包括:排序失效、列宽错位、合并行无效等,于是引入该组件的同时,顺便解决了...
Android-Table-Layout 带有表格布局示例的 Android XML 项目翻译(INA - ENG): 1-Baris Pertama 是第一排2-Baris Kedua 是第二排3-Baris Ketiga 排在第三排