Remove the first line of a twitter bootstrap table

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

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>

In CSS you would need something like:


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

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


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/

Tags:

Html

Html Table

Twitter Bootstrap

Recent Posts