Bootstrap table table-condensed table-hover，頂部邊框不顯示

Question

我使用自定義CSS與引導的外邊框。但頂部邊框不可見，除非我把它的大小設置爲2像素。

我該如何解決這個問題？

HTML

<table class="table table-condensed table-hover border"> 
<tr><td>#</td><td><strong>name</strong></td></tr> 
<tr><td>1.</td><td>one</td></tr> 
<tr><td>2.</td><td>two</td></tr> 
<tr><td>3.</td><td>three</td></tr> 
<tr><td>4.</td><td>four</td></tr> 
</table> 

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.0.3/cerulean/bootstrap.min.css"); 
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"); 

.border{ 
background-color:#fff; 
color:#000; 
padding:10px; 
border:1px solid #4C7ED1; 
} 

http://jsfiddle.net/Xy6a6/

我想的1px的＃一外表格邊框4C7ED1 及其對除了頂部四面可見，如何解決呢？

謝謝

Answer 1

使用border:1px double #4C7ED1;而不是border:1px solid #4C7ED1;

這裏是一個DEMO

Answer 2

A JSFiddle with the fix。

深入研究DOM，您會注意到它的<td>的邊界屬性爲1px solid #ddd。您需要做的只是在第一個<tr>內選擇<td>，然後應用您想要的邊框。

歸根結底，這意味着增加給你的CSS：

.border tr:first-child td { 
    border-top: 1px solid #4C7ED1; 
} 

Answer 3

你應該改變你的第一個表內的標籤thead像這樣：

<table class="table table-condensed table-hover border"> 
<thead><td>#</td><td><strong>name</strong></td></thead> 
<tr><td>1.</td><td>one</td></tr> 
<tr><td>2.</td><td>two</td></tr> 
<tr><td>3.</td><td>three</td></tr> 
<tr><td>4.</td><td>four</td></tr> 
</table> 

那麼你就必須桌子上邊框，現在你可以修改CSS規則，此元素

http://jsfiddle.net/Xy6a6/3/