Remove row lines in twitter bootstrap
I'm using twitter bootstrap for some web app I'm forced to do (I'm not a web developer) and I can't find a way to disable the row lines for tables.
As you can see from the Bootstrap documentation, the default table style contains line rows.
Regards,
Solution 1:
Add this to your main CSS:
table td {
border-top: none !important;
}
Use this for newer versions of bootstrap:
.table th, .table td {
border-top: none !important;
}
Solution 2:
In Bootstrap 3 I've added a table-no-border class
.table-no-border>thead>tr>th,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>tbody>tr>td,
.table-no-border>tfoot>tr>td {
border-top: none;
}
Solution 3:
bootstrap.min.css is more specific than your own stylesheet if you just use .table td. So use this instead:
.table>tbody>tr>th, .table>tbody>tr>td {
border-top: none;
}
Solution 4:
This is what worked for me..
.table-no-border>thead>tr>th,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>tbody>tr>td,
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
border-top: none !important;
border-bottom: none !important;
}
Had to whip out the !important to make it stick.