为什么我的表类有顶部边框？答案

【问题标题】：How come my table class has a top border?为什么我的表类有顶部边框？
【发布时间】：2014-08-25 13:42:14
【问题描述】：

我为 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>

但由于某种原因，当我应用它时，顶部有一个较厚的边框。为什么？

【问题讨论】：

Normally Inspect Element 会显示样式的来源。
border-collapse: separate; 使边框分开显示。您可以使用border-collapse: collapse; 或用border-top: 0 覆盖.table-curved 元素的顶部边框。 DEMO HERE
@HashemQolami 左上边框为 0px。请看一看。
@TIMEX 我修改了 the code 以解决问题。还添加了一些 cmets 来清理问题。希望对您有所帮助。
@HashemQolami 如果您删除，那么您的版本顶部没有圆角。我在上面添加了 td:first-child

标签： html css twitter-bootstrap

【解决方案1】：

问题：

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

【讨论】：

这不适用于预先应用的 twitter bootstrap。左上半径为 0px。
你能发布一个应用了引导程序的链接吗？