精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
表格是网页上最常见的元素，经常用于简单的层次比较少的布局。随着时代的发展，表格不在只是承担布局的任务，CSS对表格的支持更丰富，使我们可以做更多事。现在我们开始注重表格的精致和美观性，下面我们来讲一下表格相邻边框的合并和表格的宽度问题。
在每个单元格中我们都可以设置各自边框的样式、宽度和颜色等属性，那么相邻边框在合并时将以谁为准呢？下面我们来讲一下在CSS 2 规范中的定义。
（1）如果边框的属性中有“none”，那么它的优先级是最低的。只有在该边重合的所有元素的边框属性都是“none”时，该边框才会被忽略。
（）如果边框的“border-style”设置为“hidden”，那么它的优先级高于任何其他相冲的突的边框。任何边框只要有该设置，其他的边框的设置就都将无效。
（3）如果边框样式的其他设置均相同，只是颜色上有区别，那么单元格的样式最优先，然后依次是行、行组、列、列组的样式，最后是表格的样式。
（4）如果重合的边框中没有被设置为“hidden”的，并且至少有一个不是“none”，那么重合的边框中粗的优先于细的。如果几个边框的“border-width”相同，那么样式的优先级次序由高到低依次为“double”“solid”“dashed”“dotted”“ridge”“outset”“groove”“inset”。
但是在IE浏览器中还没有完全执行以上规范。在CSS 2 规范中，给出了一个明确的演示。下面的代码就来自于CSS 2 规范。
<html>
<head>
<style>
table{
border-collapse:collapse;
border:5px solid yellow;
}
*#coll {
border:3px solid black;}
TD{
border:1px solid red;}
TD.solid-blue{
border:5px dashed blue;}
TD.solid-green{
border:5px solid green;}
</style>
</head>
<body>
<table>
<col id="col1"><col id="col2"><col id="col3">
<tr id="row1">
<td>a
<td>b
<td>c
</tr>
<tr id="row2">
<td>d
<td class="solid-blue">e
<td class="solid-green">f
</tr>
<tr id="row3">
<td>g
<td>h
<td>i
</tr>
<tr id="row4">
<td>j
<td>k
<td>l
</tr>
<tr id="row5">
<td>m
<td>n
<td>o
</tr>
</table>
</body>
</html>
可以看到IE浏览器并没有完全遵守CSS 2 的规范，而Firefox的显示效果严格符合CSS 2 规范。
要知道，CSS 提供了两种确定表格和表格内部单元格宽度的方式。一种与内容无关，称为“固定方式”；一种与表格内部的内容有关，称为“自动方式”。
在固定方式下，表格的水平布局不依赖单元格的内容，而明确的由“width”属性指定。如果属性值设为“auto”，就意味着使用“自动方式”进行表格的布局。在使用自动方式的时候，实际宽度可能并不是“width”属性的设置值，因为它会根据单元格中的内容多少进行调整。
在两种模式下，各自如何计算布局宽度是一个比较复杂的逻辑过程。对于一般用户来说，不需要精确地掌握它，但是知道这两种方式是很有用的。
无论各列中的内容有多少，都要严格保证按照指定的宽度显示时，可以用“固定方式”。反之，对各列宽度没有严格要求时就使用“自动方式”，这样可以更加有效地利用页面空间。
如果要使用固定方式，就需要对表格设置它的“table-layout”属性。将它设置为“fixed”也就是固定方式；设置为“auto”时则为自动方式。浏览器默认使用自动方式。