Bootstrap table tr border top和bottom不起作用

时间：2016-09-08 11:57:36

标签： html css twitter-bootstrap

我尝试让我的表格像enter image description here

一样

我尝试将tr的border bottom和top设置为像我在图像中的代码。一个边界有效但另一边无效。 互联网上的某个人说将tr的显示块放在一边很好，但如果我这样做，我的所有文字都会留下来。 在我的代码我但红色和蓝色边框颜色看得更好。 有人能告诉我如何实现这个目标吗？

＆＃13;
＆＃13; 
table {
  background-color: #EEEEEE;
  margin-top: 40px;
}
table tr {
  /*display: block;*/
  border-top: 2px solid red;
  border-bottom: 2px solid blue;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您需要覆盖Bootstrap中的默认样式，要么具有更高的特异性，要么!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: 1px solid #ddd;
}

然后您需要覆盖border-collapse属性

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我已更新您的代码。输出将为您提供顶部边框颜色为红色，底部边框颜色为蓝色。

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>

相关问题
最新问题