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