引导表 tr 边框顶部和底部不起作用答案

【问题标题】：Bootstrap table tr border top and bottom doesn't work引导表 tr 边框顶部和底部不起作用
【发布时间】：2016-09-08 20:19:41
【问题描述】：

我试着让我的桌子像这里

我尝试为 tr 设置边框底部和顶部，以使我的代码像图像中一样。一个边界有效，但另一个无效。互联网上有人说为 tr 放置显示块很好，但如果我这样做，我的所有文本都会放在左侧。在我的代码中，我使用红色和蓝色边框颜色更好看。谁能告诉我如何实现这一目标？

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>

【问题讨论】：

引用类似JSFiddle的内容？
不完全是我的朋友。我想在第一个 tr 的顶部有一个边框，然后每个 tr 的顶部和底部应该有 2 个不同的边框颜色
好吧，你可以通过玩我的 Fiddle 来获得它。
@SorinD。你需要我的回答还是别的什么？

标签： html css twitter-bootstrap

【解决方案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属性

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>

【讨论】：

看起来像边界折叠：分离！重要；正在做我朋友的所有工作。

【解决方案2】：

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

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>

【讨论】：

@Sorin 你需要这样的吗？
我的朋友边框红色和边框蓝色假设彼此重叠。在设计图中是边框#fff 在边框#ccc 的顶部，带有表格bg #eee。