为Table中的thead加上边框，竟然头疼

五岳之巅

出发点其实很简单，就是想做个这样的表：

所以就先架构table的html代码：

1.         <table cellspacing="0">
   
2.             <thead>
   
3.                 <tr><th>姓名</th><th>性别</th><th>居住地</th></tr>
   
4.             </thead>
   
5.             <tbody>
   
6.                 <tr><td>张三</td><td>男</td><td>北京胡同</td></tr>
   
7.                 <tr><td>李四</td><td>女</td><td>上海电视塔</td></tr>
   
8.                 <tr><td>王五</td><td>男</td><td>锦州小菜厂</td></tr>
   
9.                 <tr><td>赵六</td><td>女</td><td>沈阳五街</td></tr>
   
10.                 <tr><td>陈七</td><td>男</td><td>武汉地铁</td></tr>
    
11.             </tbody>
    
12.         </table>

随后，设置CSS样式：

1. table{
   
2.     width:400px;
   
3.     text-align:center;
   
4. }
   
5. table thead{
   
6.     border-bottom:2px solid #000080;
   
7. }
   
8. .even{
   
9.     background:#c0c0c0;
   
10. }
    
11. .odd{
    
12.     background:#a6caf0;
    
13. }
    
14. .firsttr{
    
15.     background:#ffff00;
    
16. }

再绑定jQuery效果：

1.     $("tbody tr:even").addClass("even");
   
2.     $("tbody tr:odd").addClass("odd");
   
3.     $("tr:eq(0)").addClass("firsttr");

可是，没有看到thead的下边框啊，如图：

然后，当然我很迷惑，发现thead这个东西啥都没效果，当时我心里就有个七八分明白了，最后为了确定，google到了一个外国人的帖子，《Why border of <th> and <thead> both not showing here?》，这个叫Jitendra Vyas的人也和我有同样的困惑。

接着，有人回复了，“You can't style the <thead> itself. It's not a visible element, so any style that you give it will only be visible when it's inherited by it's children.”

说的很对，意思是thead这个标记，是非可见的，你对它的设置最多只能反映到它包含的后代元素中去。

现在，明白了，继续试吧，改成thead tr：

1. table thead tr{
   
2.     border-bottom:2px solid #000080;
   
3. }

正当我要得意的时候，惨了，还是没效果：

我去，继续改：

1. table thead th{
   
2.     border-bottom:2px solid #000080;
   
3. }

哎，没问题了，用th就ok，如图：

你们不觉得奇怪么？

现在我又陷入了困境，tr肯定是可见元素啊。。。

换用新的CSS:

1. table{
   
2.     width:400px;
   
3.     text-align:center;
   
4. }
   
5. 
   
6. .even{
   
7.     background:#c0c0c0;
   
8. }
   
9. .odd{
   
10.     background:#a6caf0;
    
11. }
    
12. .firsttr{
    
13.     background:#ffff00;
    
14.     border:2px solid #000080;
    
15. }

结果背景出来了，但border没有。

别泄气，继续查看，相关的文章都指向同一个线索：border-collapse，我把这个CSS加入：

1. table{
   
2.     width:400px;
   
3.     text-align:center;
   
4.     border-collapse:collapse;
   
5. }

结果出来了：

再回过头来看看，border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

在本例中，collapse就可以，而seperate就不行。其实seperate本来是想独立展示出边框的，collapse想合并隐去。怎么到这里就反过来了呢？

真的是用thead的人少，最后看到一篇这个：

《border-collapse实现表格细线边框》，是个好办法，但仍然没有解决这个thead中表现相反的问题。

谁知道，就给我留言吧。