Sorin D. Sorin D. - 2 months ago 20
CSS Question

Bootstrap table tr border top and bottom doesn't work

I try to have my table like here enter image description here

I try to put border bottom and top for tr to make my code like in the image. One border works but the other doesn't.
Someone on internet said that it's good to put display block for tr, but if I do that all my text will go left side.
In my code I but red and blue border color to see better.
Can someone tell me how to achieve this?



table {
background-color: #EEEEEE;
margin-top: 40px;
}
table tr {
/*display: block;*/
border-top: 2px solid red;
border-bottom: 2px solid blue;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td>&nbsp;</td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>




Answer

There is default styling in Bootstrap that you need to override, either with increased specificity or !important.

The code is

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

Then you need to override the border-collapse property

table {
  background-color: #EEEEEE;
  margin-top: 40px;
  border-collapse: separate !important;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
  padding: 8px;
  line-height: 1.42857143 vertical-align: top;
  border-top: 4px solid green !important;
  border-bottom: 4px solid red !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td class="table-title">Matin</td>
      <td class="table-title">Apres-midi</td>
    </tr>
    <tr>
      <td>Lundi</td>
      <td>08h00-12h00</td>
      <td>13h00-17h00</td>
    </tr>
    <tr>
      <td>Mardi</td>
      <td>08h00-12h00</td>
      <td>13h00-17h00</td>
    </tr>
    <tr>
      <td>Mercredi</td>
      <td>08h00-12h00</td>
      <td>13h00-17h00</td>
    </tr>
    <tr>
      <td>Jeudi</td>
      <td>08h00-12h00</td>
      <td>13h00-17h00</td>
    </tr>
    <tr>
      <td>Vendredi</td>
      <td>08h00-12h00</td>
      <td>13h00-17h00</td>
    </tr>
    <tr>
      <td>Samedi</td>
      <td>08h00-12h00</td>
      <td>13h00-17h00</td>
    </tr>
    <tr>
      <td>Dimache</td>
      <td>Ferme</td>
      <td>Ferme</td>
    </tr>
  </tbody>
</table>

Comments