user1316498
user1316498

Reputation:

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

I have a new project I'm working on, and I'm using 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.

Here is the website where the table is located: 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;}

Upvotes: 6

Views: 26125

Answers (2)

Ishan Jain
Ishan Jain

Reputation: 8171

Yes you can remove this border:

In css file you can see :

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

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

And following CSS for set border-top on table row elements:

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

Upvotes: 13

Mohsen Safari
Mohsen Safari

Reputation: 6805

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;

Upvotes: 6

Related Questions