Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style bootstrap 3 border between table head and body

I am doing some basic styling of a table in bootstrap and turn the cell borders dark blue. Nothing fancy and a completely standard table but I cant for the life of me work out how to style the border between the table head and table body. I have tried everything to get this line to look the same as everything else.

enter image description here

Can anyone tell me how to create a bootstrap table with borders on the cells that are not gray. My table is also responsive but that seems to make little difference

.table td, .table th {
    border: 1px solid #2980B9;
}

.table{
    border: 1px solid #2980B9;
}

  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>1</th>
          <th>Table cell</th>
          <th>Table cell</th>
          <th>Table cell</th>
          <th>Table cell</th>
          <th>Table cell</th>
          <th>Table cell</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </div>
like image 716
EnduroDave Avatar asked Nov 30 '22 12:11

EnduroDave


1 Answers

You should use the selectors that bootstrap uses like so: http://jsfiddle.net/4tdS2

Your css could look something like this:

.table { border: 1px solid #2980B9; }
.table thead > tr > th { border-bottom: none; }
.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid #2980B9; }
like image 177
Patrick Coffey Avatar answered Dec 10 '22 09:12

Patrick Coffey