CODEWITHSUNDEEP
csstwitter-bootstrap
w00t
w00t

Reputation: 909

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,

Upvotes: 74

Views: 110373

Answers (7)

Crazy Cat
Crazy Cat

Reputation: 1452

Quick and dirty fix if you have only a table or two where you want to remove the lines: Apply "style="border-top: none;" to each and every <th> and/or <td> tag within a table.
Table header:

<th style="border-top: none;">

Table data:

<td style="border-top: none;">

Upvotes: 0

Juan
Juan

Reputation: 850

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>

Upvotes: 0

Netsi1964
Netsi1964

Reputation: 3620

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

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75399

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

Upvotes: 125

honkskillet
honkskillet

Reputation: 3137

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.

Upvotes: 2

Spindle
Spindle

Reputation: 300

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

Upvotes: 15

dex412
dex412

Reputation: 519

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

Upvotes: 51

Related Questions