為Table中的thead加上邊框

出發點其實很簡單，就是想做個這樣的表：

 

所以就先架構table的html代碼：

        <table cellspacing="0">
            <thead>
                <tr><th>姓名</th><th>性別</th><th>居住地</th></tr>
            </thead>
            <tbody>
                <tr><td>張三</td><td>男</td><td>北京胡同</td></tr>
                <tr><td>李四</td><td>女</td><td>上海電視塔</td></tr>
                <tr><td>王五</td><td>男</td><td>錦州小菜廠</td></tr>
                <tr><td>趙六</td><td>女</td><td>沈陽五街</td></tr>
                <tr><td>陳七</td><td>男</td><td>武漢地鐵</td></tr>
            </tbody>
        </table>

隨后，設置CSS樣式：

table{
    width:400px;
    text-align:center;
}
table thead{
    border-bottom:2px solid #000080;
}
.even{
    background:#c0c0c0;
}
.odd{
    background:#a6caf0;
}
.firsttr{
    background:#ffff00;
}

再綁定jQuery效果：

    $("tbody tr:even").addClass("even");
    $("tbody tr:odd").addClass("odd");
    $("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：

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

正當我要得意的時候，慘了，還是沒效果：

 

我去，繼續改：

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

哎，沒問題了，用th就ok，如圖：

你們不覺得奇怪么？

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

換用新的CSS:

table{
    width:400px;
    text-align:center;
}

.even{
    background:#c0c0c0;
}
.odd{
    background:#a6caf0;
}
.firsttr{
    background:#ffff00;
    border:2px solid #000080;
}

結果背景出來了，但border沒有。

別泄氣，繼續查看，相關的文章都指向同一個線索：border-collapse，我把這個CSS加入：

table{
    width:400px;
    text-align:center;
    border-collapse:collapse;
}

結果出來了：

 

再回過頭來看看，border-collapse屬性設置表格的邊框是否被合並為一個單一的邊框，還是象在標准的 HTML 中那樣分開顯示。

在本例中，collapse就可以，而seperate就不行。其實seperate本來是想獨立展示出邊框的，collapse想合並隱去。怎么到這里就反過來了呢？

真的是用thead的人少，最后看到一篇這個：

《border-collapse實現表格細線邊框》，是個好辦法，但仍然沒有解決這個thead中表現相反的問題。

 

誰知道，就給我留言吧。

 

試了試 最后用的

table{
border:1px solid black;
width: 200px;
height: 200px;
text-align: center;
border-collapse:collapse;
}
table thead tr{
border-bottom:2px solid black;

}