CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6385799
user6385799

Reputation:

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>

Upvotes: 2

Views: 12267

Answers (2)

Paulie_D
Paulie_D

Reputation: 115045

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>

Upvotes: 1

Abhijeet
Abhijeet

Reputation: 4309

I have updated your code. The output will give you top border color as red and bottom border color as blue.

table {
  background-color: #EEEEEE;
  margin-top: 40px;
}
tr:nth-child(even){
  /*display: block;*/
  border-top: 2px solid red;
  /*background-color: #CC9999;*/
  
}
tr:nth-child(odd){
  /*display: block;*/
  border-top: 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>

Upvotes: 0

Related Questions