设计表格时加上几个声明,可以改善表格呈现性能
2014-09-04 09:08
183 查看
资料参考:
http://blog.163.com/smile_mz/blog/static/121855763200982635826463/ http://www.webhek.com/empty-cells/ http://www.w3help.org/zh-cn/causes/RE3021
一、问题由来
昨天在看CSS3实战,设置表格的时候,看到书中关于设置表格属性有这么几行代码,
table { table-layout: fixed; empty-cells:show; border-collapse:collapse; }
书中旁边的注释是:
table-layout: fixed; 能改善表格呈现性能;
empty-cells:show;能够隐藏不必要的干扰因素
border-collapse:collapse; 能让表格看起来更精致
对于如何第一句是如何改善表格呈现性能 ,表示不解。
二、问题解决
1、table-layout 版本:CSS2 兼容性:IE5+ 继承性:无
语法:
table-layout : auto | fixed
取值:
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% 。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tablelayout 。
简言之,就是固定布局算法比默认的自动算法要快很多。
2、'empty-cells' 特性应用于表格的单元格,用来控制空单元格的边框和其周围的背景色,规范中对其描述如下:
可选值:show | hide | inherit
初始值:show
可应用的元素:表格单元格
继承性:可以继承
百分比数值:不可用/不适用
IE8+支持该属性。hide——隐藏空单元格的边框和背景,show——显示空单元格的边框和背景。
参考代码:
View Code
3、border-collapse:collapse
合并单元格之间的细线,这个应该都知道。
http://blog.163.com/smile_mz/blog/static/121855763200982635826463/ http://www.webhek.com/empty-cells/ http://www.w3help.org/zh-cn/causes/RE3021
一、问题由来
昨天在看CSS3实战,设置表格的时候,看到书中关于设置表格属性有这么几行代码,
table { table-layout: fixed; empty-cells:show; border-collapse:collapse; }
书中旁边的注释是:
table-layout: fixed; 能改善表格呈现性能;
empty-cells:show;能够隐藏不必要的干扰因素
border-collapse:collapse; 能让表格看起来更精致
对于如何第一句是如何改善表格呈现性能 ,表示不解。
二、问题解决
1、table-layout 版本:CSS2 兼容性:IE5+ 继承性:无
语法:
table-layout : auto | fixed
取值:
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% 。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tablelayout 。
简言之,就是固定布局算法比默认的自动算法要快很多。
2、'empty-cells' 特性应用于表格的单元格,用来控制空单元格的边框和其周围的背景色,规范中对其描述如下:
可选值:show | hide | inherit
初始值:show
可应用的元素:表格单元格
继承性:可以继承
百分比数值:不可用/不适用
IE8+支持该属性。hide——隐藏空单元格的边框和背景,show——显示空单元格的边框和背景。
参考代码:
HTML代码 <table cellspacing="0" id="table"> <tr> <th>Fruits</th> <th>Vegetables</th> <th>Rocks</th> </tr> <tr> <td></td> <td>Celery</td> <td>Granite</td> </tr> <tr> <td>Orange</td> <td></td> <td>Flint</td> </tr> </table> <button id="b" data-ec="hide">切换EMPTY-CELLS</button> CSS代码 body { text-align: center; padding-top: 20px; font-family: Arial, sans-serif; } table { border: solid 1px black; border-collapse: separate; border-spacing: 5px; width: 500px; margin: 0 auto; empty-cells: hide; background: lightblue; } th, td { text-align: center; border: solid 1px black; padding: 10px; } button { margin-top: 20px; } js代码 var b = document.getElementById('b'), t = document.getElementById('table'); b.onclick = function () { if (this.getAttribute('data-ec') === 'hide') { t.style.emptyCells = 'show'; this.setAttribute('data-ec', 'show'); } else { t.style.emptyCells = 'hide'; this.setAttribute('data-ec', 'hide'); } };
View Code
3、border-collapse:collapse
合并单元格之间的细线,这个应该都知道。
相关文章推荐
- 可以改善性能的InnoDB配置参数[zhuan]
- 可以改善mysql性能的InnoDB配置参数
- 分享几个查找小图标的网站,以下几个网站都可以搜索图标,可以下载png、jpg、gif、icon等格式,而且包含多个尺寸,背景颜色,做网页设计的一定要收藏哟。
- 巧用CSS提升表格呈现性能
- 可以改善mysql性能的InnoDB配置参数
- 改善既有代码的设计(二)----------重构和性能
- Chrome浏览器可以改进的几个细节设计
- 建议8.8:表的设计要尽量满足第二范式(2NF),基于提升性能的考虑可以适当增加冗余而不必满足第三范式(3NF)。
- 可以改善mysql性能的InnoDB配置参数
- 可以改善mysql性能的InnoDB配置参数
- 可以改善mysql性能的InnoDB配置参数
- 可以改善mysql性能的InnoDB配置参数
- 分辨率使用情况统计-做设计的人可以参考常用的几个分辨率
- 建议8.8:表的设计要尽量满足第二范式(2NF),基于提升性能的考虑可以适当增加冗余而不必满足第三范式(3NF)。(3)
- 【个人项目】项目记录:github链接、设计实现、单元测试、性能分析与改进、PSP完成表格、总结反思
- Linux上几个可以影响到服务器并发处理性能的系统参数
- 方法中没有产生异常,也没有产生异常的可能,在方法声明后后面可以加上throws exception吗????
- 应用程序性能的监控与改善——性能设计
- 当你不知道PPT要怎么设计的时候,可以看看这几个网站
- 几个web前端表格样式设计的链接网址(备忘)