CODEWITHSUNDEEP
htmltwitter-bootstraphtml-table
Dharma Dude
Dharma Dude

Reputation: 559

Remove the first line of a twitter bootstrap table

As you all know when you use Twitter Bootstrap to get a table you get a result like this: enter image description here

Would it be possible o remove the very first line of the table, the one above "Abos Girolamo"? Thanks

UPDATE: Here is the code of the table:

<table class="table table-no-border">
    <tbody>

      <tr>

        <td>Abos Girolamo</td>
      </tr>

      <tr>

        <td>Aboulker Isabelle</td>
      </tr>

      <tr>

        <td>Adam Adolphe</td>
      </tr>
</tbody>
</table>

Upvotes: 21

Views: 18664

Answers (7)

Abhishek
Abhishek

Reputation: 1120

If you want this: enter image description here

Here is the code:

table thead {
  background-color: var green !important;
}
table tr {
  border-bottom: 1.5px solid grey;
}
table thead tr:first-of-type {
  border-bottom: 0;
}
table tr th {
  border: 0;
}
table tr td {
  border: 0;
}

Upvotes: 0

Ejaz
Ejaz

Reputation: 1632

Some how other answers didn't work for me, below style worked for me -

.table {
  border-top-style: hidden;
}

Upvotes: 0

Thomas Kainrad
Thomas Kainrad

Reputation: 2830

I would like to add another possibility that can be useful if you want to do this only for a specific table and don't want any risk that an additional CSS rule could affect existing tables:

Add style="border-top: none" to each <td> element of the first table row.

E.g.

<table class="table">
    <tbody>
        <tr>
            <td style="border-top: none">Abos Girolamo</td>
        </tr>
        <tr>
            <td>Aboulker Isabelle</td>
        </tr>
        <tr>
            <td>Adam Adolphe</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Adrift
Adrift

Reputation: 59819

.table > tbody > tr:first-child > td {
    border: none;
}


@import url('http://getbootstrap.com/dist/css/bootstrap.css');

table {
    margin-top: 50px;
}

.table > thead > tr:first-child > td, 
.table > tbody > tr:first-child > td {
    border: none;
}
<table class="table table-no-border">
    <tbody>

      <tr>

        <td>Abos Girolamo</td>
      </tr>

      <tr>

        <td>Aboulker Isabelle</td>
      </tr>

      <tr>

        <td>Adam Adolphe</td>
      </tr>
</tbody>
</table>

Upvotes: 36

Colin Miller
Colin Miller

Reputation: 206

For those who found this question via Google...

Bootstrap tables assume you will use a thead in your markup, which is why that top line is present. If you have a mix of tables that include a header and don't include a header, you can use the following CSS to style them correctly.

/* Remove the top border when a table is missing the header */
.table > tbody > tr:first-child > td {
    border: none;
}

/* Include the border when there's a header */
.table > thead + tbody > tr:first-child > td {
    border-top: 1px solid #ddd;
}

http://jsfiddle.net/colinjmiller93/fwsmpu5u/1/

Upvotes: 7

Alex
Alex

Reputation: 7374

In CSS you would need something like:


.table > tbody > tr:first-child {
   display: none;
}

http://jsfiddle.net/ahallicks/bwbXA/

Upvotes: 1

emredelioglu
emredelioglu

Reputation: 252

If you want to use jQuery:

$('#TableID tr:first-child').remove();

<html><body><table id='TableID'>
<tr>Abos Girolamo</tr>
<tr>Aboulker Isabelle</tr>
<tr>Adam Adolphe</tr>
</table></body></html>

Upvotes: 1

Related Questions