Remove row lines in twitter bootstrap
CssTwitter BootstrapCss Problem Overview
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,
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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 - Css
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.
Solution 5 - Css
The other way around, if you have problems ADDING the lines to your panel dont forget to add the to your TABLE. By default (http://getbootstrap.com/components/#panels), it is suppose to add the line but It helped me to add the tag so now the row lines are shown.
The following example "probably" wont display the lines between rows:
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<tr><td> Hi 1! </td></tr>
<tr><td> Hi 2! </td></tr>
</table>
</div>
The following example WILL display the lines between rows:
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<thead></thead>
<tr><td> Hi 1! </td></tr>
<tr><td> Hi 2! </td></tr>
</table>
</div>
Solution 6 - Css
Got the same question from a friend. My suggestion which does not require !Important
looks like this: I add a custom class "no-border
" which can be added to the bootstrap table.
.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}
You can see my go at a solution here