我的表類如何擁有頂部邊框？

-2

我爲Bootstrap表添加了一個table-curved類來圓角。我的表類如何擁有頂部邊框？

.table-curved { 
    border-collapse: separate; 
} 
.table-curved { 
    border: solid #ccc 1px; 
    border-radius: 2px; 
    border-left:0px; 
} 
.table-curved td, .table-curved th { 
    border-left: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
} 
.table-curved th { 
    border-top: none; 
} 
.table-curved th:first-child { 
    border-radius: 2px 0 0 0; 
} 
.table-curved th:last-child { 
    border-radius: 0 2px 0 0; 
} 
.table-curved th:only-child{ 
    border-radius: 2px 2px 0 0; 
} 
.table-curved tr:last-child td:first-child { 
    border-radius: 0 0 0 2px; 
} 
.table-curved tr:last-child td:last-child { 
    border-radius: 0 0 2px 0; 
} 


<table class="table table-curved " id="details"> 
</table>

但由於某種原因，當我應用此功能時，頂部會有一個較粗的邊框。爲什麼？

來源

2014-07-17 TIMEX

通常檢查元素會告訴你這裏的款式是來自。 –

'border-collapse：separate;'使邊框單獨顯示。您可以使用'border-collapse：collapse;'或通過'border-top：0'覆蓋'.table-curved'元素的頂部邊界。 ** [DEMO HERE]（http://jsbin.com/dipej/1/edit）** –

@HashemQolami左上邊框爲0px。請看一下。 – TIMEX

問題：

border-collapse: separate是使你的邊界單獨顯示。您正在使用兩個borders。

在.table-curved，您使用的是：

border: solid #ccc 1px;

在.table-curved td, .table-curved th，您使用的是：

border-left: 1px solid #ccc; 
border-top: 1px solid #ccc;

解決方案：

在.table-curved，覆蓋當前border屬性：

地址：

border-top:none;

JSFiddle Demo

來源

2014-07-17 01:35:52 imbondbaby

這不適用於事先應用的twitter引導程序。左上半徑是0px。 – TIMEX

你可以發佈一個應用了bootstrap的鏈接嗎？ – imbondbaby

http://jsfiddle.net/D64TZ/6/看看這個@imbondbaby – TIMEX

我的表類如何擁有頂部邊框？

回答

相關問題