如何删除bootstrap 3.0表格中的下边框?

时间:2013-10-12 07:40:50

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在开发一个新项目,我正在使用Bootstrap 3.0。

我有一个带有“table”类的表(并没有更多),它的DOM中有一个thead和tbody。 tbody中没有任何边框,但在thead中有一个小的白色(或接近白色)边框,在我的生命中,我无法离开。

以下是该表所在的网站: http://majornoob.com/dev/mcsr/

如果我能帮助解决我的问题,我会非常乐意编辑该帖子。

修改

这是我接受的答案的修改版本,因为我只是删除了边框而我没有修改任何其他内容:

.table thead>tr>th,.table tbody>tr>th,.table tfoot>tr>th,.table thead>tr>td,.table tbody>tr>td,.table tfoot>tr>td{border:none;}

2 个答案:

答案 0 :(得分:9)

是的,您可以删除此边框:

css文件中,您可以看到:

在bootstrap中你有以下CSS对于表头元素的集合border-bottom

.table thead>tr>th {
   vertical-align: bottom;
   border-bottom: 2px solid hsl(0, 0%, 87%);
}

在表行元素上跟随CSS设置border-top

.table thead>tr>th,.table tbody>tr>th,.table tfoot>tr>th,.table thead>tr>td,.table tbody>tr>td,.table tfoot>tr>td{
   padding:8px;
   line-height:1.428571429;
   vertical-align:top;
   border-top:1px solid #ddd
}

通过删除这两种边框样式,您可以轻松获得成功和所需。

答案 1 :(得分:2)

这是边界:

.table thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}

您可以根据需要进行编辑。


<小时/>

更新

也可以编辑这个课程:

.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;