table-layout应用

 在做GridView控件时，要分表头和表体，这样要用到两个table，因为要保证表体的数据行过多时，滚动表体数据时，
 表头不动。但是控制不好的话，会导致两个表的单元格线不对齐。这时要用到table一样式属性table-layout:
 table-layout  版本：CSS2　 兼容性：IE5+　继承性：无
 语法：
 table-layout : auto | fixed 
 取值：
   auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
   fixed : 固定布局的算法。在这种算法中，表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% 。
[自己总结]
如果指定了table的百分比，并且第一行的每个单元格的宽度之和小于table指定的百分比宽度，则按百分比显示；但是如果指定了table的百分比，并且第一行的每个单元格的宽度之和要大于table指定的百分比宽度，则按第一行的每个单元格的宽度之和显示；同理，如果table指定了固定值，也是同上面一样的呈现。
说明：(说明部分转载)
 设置或检索表格的布局算法。
 你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式  布置表格栏宽度：

使用 col 或 colGroup 对象的宽度( width )属性信息。

使用表格第一行内的单元格的宽度( width )信息。

依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度，内容将会被换行。假如无法换行，则内容会被裁切。假如此属性被设置为 fixed ，则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了，那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。
以下是写的一个小例子(模拟GridView表头和表体)：

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 2 < HTML >
 3   < HEAD >
 4    < TITLE >  New Document  </ TITLE >
 5    < META  NAME ="Generator"  CONTENT ="EditPlus" >
 6    < META  NAME ="Author"  CONTENT ="" >
 7    < META  NAME ="Keywords"  CONTENT ="" >
 8    < META  NAME ="Description"  CONTENT ="" >
 9   </ HEAD >
10 < style >
11.GridView
12{}{
13    table-layout: fixed; 
14    font-size: 9pt;   
15    font-family: SimSun; 
16    background-color: #e7f3ff;
17}
18
19.GridView TD
20{}{
21     border-bottom:1px solid #C0C0C0;
22     border-right:1px solid #C0C0C0;
23}
24
25.GridView TH
26{}{
27    border-top:1px solid #C0C0C0;
28    border-bottom:1px solid #C0C0C0;
29    border-right:1px solid #C0C0C0;
30    font-weight:normal;
31}
32 </ style >
33   < BODY >
34    < div  style ="position:absolute;" >
35    < div  style ="position:relative;width:100%;" >
36    < TABLE  class ="GridView"  id ="tableheader"   cellSpacing ="0"  cellPadding ="0"  border ="0" >
37    < TR >
38      < TH  style ="width:60px; height:19px;border-left:1px solid #C0C0C0;" > 列一 </ TH >
39      < TH  style ="width:150px" > 列二 </ TH >
40      < TH  style ="width:150px" > 列三 </ TH >
41      < TH  style ="width:100px" > 列四 </ TH >
42      < TH  style ="width:100px" > 列五 </ TH >
43    </ TR >
44    </ TABLE >
45    </ div >
46    < div  style ="overflow-y:auto; width:560px; height:150px;" >
47    < TABLE  class ="GridView"  id ="tablebody"  style ="BACKGROUND-COLOR: white"  cellSpacing ="0"  cellPadding ="0"  border ="0"   >
48    < TR >
49      < TD  style ="width:60px;border-left:1px solid #C0C0C0;" > text1 </ TD >
50      < TD  style ="width:150px" > text1 </ TD >
51      < TD  style ="width:150px" > text2 </ TD >
52      < TD  style ="width:100px" > text3 </ TD >
53      < TD  style ="width:100px" > text4 </ TD >
54    </ TR >
55    < TR >
56      < TD  style ="width:60px;border-left:1px solid #C0C0C0;" > text1 </ TD >
57      < TD  style ="width:150px" > text1 </ TD >
58      < TD  style ="width:150px" > text2 </ TD >
59      < TD  style ="width:100px" > text3 </ TD >
60      < TD  style ="width:100px" > text4 </ TD >
61    </ TR >
62      < TR >
63      < TD  style ="width:60px;border-left:1px solid #C0C0C0;" > text1 </ TD >
64      < TD  style ="width:150px" > text1 </ TD >
65      < TD  style ="width:150px" > text2 </ TD >
66      < TD  style ="width:100px" > text3 </ TD >
67      < TD  style ="width:100px" > text4 </ TD >
68    </ TR >
69      < TR >
70      < TD  style ="width:60px;border-left:1px solid #C0C0C0;" > text1 </ TD >
71      < TD  style ="width:150px" > text1 </ TD >
72      < TD  style ="width:150px" > text2 </ TD >
73      < TD  style ="width:100px" > text3 </ TD >
74      < TD  style ="width:100px" > text4 </ TD >
75    </ TR >
76      < TR >
77      < TD  style ="width:60px;height:19px;border-left:1px solid #C0C0C0;" > 我的内容很长但是我不会把列撑开，因为我们都设置了table-layout: fixed;，并且我们对应的列的宽度都是一致的 </ TD >
78      < TD  style ="width:150px" > text1 </ TD >
79      < TD  style ="width:150px" > text2 </ TD >
80      < TD  style ="width:100px" > text3 </ TD >
81      < TD  style ="width:100px" > text4 </ TD >
82    </ TR >
83        < TR >
84      < TD  style ="width:60px;border-left:1px solid #C0C0C0;" > 我的内容很长但是我不会把列撑开，因为我们都设置了table-layout: fixed;，并且我们对应的列的宽度都是一致的 </ TD >
85      < TD  style ="width:150px" > text1 </ TD >
86      < TD  style ="width:150px" > text2 </ TD >
87      < TD  style ="width:100px" > text3 </ TD >
88      < TD  style ="width:100px" > text4 </ TD >
89    </ TR >
90    </ TABLE >
91    </ div >
92    </ div >
93   </ BODY >
94 </ HTML >
95