设计表格时加上几个声明，可以改善表格呈现性能

资料参考：

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

合并单元格之间的细线，这个应该都知道。