Html 如何删除引导程序 3.0 表头上的底部边框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19331774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:24:04  来源:igfitidea点击:

How do I remove the bottom border on a bootstrap 3.0 table thead?

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问by Ishan Jain

I have a new project I'm working on, and I'm using Bootstrap 3.0.

我有一个正在处理的新项目,我正在使用 Bootstrap 3.0。

I have a table with class "table" (and no more), it has a thead and tbody in it's DOM. There aren't any borders in the tbody, but in the thead there is a small white (or nearly white) border that, for the life of me, I cannot get to go away.

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

Here is the website where the table is located: http://majornoob.com/dev/mcsr/

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

If I can be of more assistance to helping in resolving my question, I'd be most happy to edit the post.

如果我能在帮助解决我的问题方面提供更多帮助,我很乐意编辑帖子。

EDIT

编辑

Here is my modified version of the accepted answer, as I'm just removing the borders and am not modifying anything else:

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

.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;}

回答by Ishan Jain

Yes you can remove this border:

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

In cssfile you can see :

css文件中你可以看到:

In bootstrap you have following CSS For set border-bottomon table head elements:

在引导程序中,您border-bottom在表头元素上设置了以下 CSS For :

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

And following CSS for set border-topon table row elements:

并遵循用于设置border-top表格行元素的CSS :

.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
}

By removing these two border style, you can easily get success and what you want.

通过去除这两个边框样式,您可以轻松获得成功和您想要的。

回答by Mohsen Safari

here is the border:

这是边界:

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

you can edit it as you like.

你可以随意编辑它。





update:

更新:

edit this class too:

也编辑这个类:

.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;