表td之间的保证金

Question

我需要以下布局。我试图使用下面的代码，但无法得到它。我想要两行之间的边距与背景颜色。

.table.BillingPage>thead>tr>th {
  font-weight: normal;
  color: #FF004F;
  padding-bottom: 0;
  border-bottom: 2px solid #FF004F;
}
.table.BillingPage>tbody>tr {
  background-color: #f2f3f5!important;
}
.table.BillingPage>tbody>tr>td {
  margin: 5px 0;
  border: none;
}
tr.yearly {
  border-left: 5px solid #019cde;
}
tr.monthly {
  border-left: 5px solid red;
}
.promotionalCode {
  border-radius: 4px;
  border: 1px solid #ccc;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table class="table table-condensed BillingPage">
  <thead>
    <tr>
      <th>Business Name</th>
      <th>Promotional Code</th>
      <th>Payment Cycle</th>
      <th>Price</th>
      <th style="visibility:hidden;">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="yearly">
      <td>Black Women In Arts</td>
      <td>
        <input type="text" id="discount-" onclick="" onblur="" name="discountlisting_id" class="promotionalCode" value="">
      </td>
      <td>
        <label class="checkbox-inline">
          <input type="checkbox" value="">Yearly</label>
        <label class="checkbox-inline">
          <input type="checkbox" value="">Monthly</label>
      </td>
      <td id="singleprice-">$111.98</td>
      <td><i class="fa fa-times"></i>&nbsp;<a href="#">Remove</a>
      </td>
    </tr>
    <tr class="monthly">
      <td>Ocean Outdoor (UK)</td>
      <td>
        <input type="text" id="discount-" onclick="" onblur="" name="discountlisting_id" class="promotionalCode" value="">
      </td>
      <td>
        <label class="checkbox-inline">
          <input type="checkbox" value="">Yearly</label>
        <label class="checkbox-inline">
          <input type="checkbox" value="">Monthly</label>
      </td>
      <td id="singleprice-">$111.98</td>
      <td><i class="fa fa-times"></i>&nbsp;<a href="#">Remove</a>
      </td>
    </tr>
    <tr class="yearly">
      <td>Silvermere Golf &amp; Leisure Ltd</td>
      <td>
        <input type="text" id="discount-" onclick="" onblur="" name="discountlisting_id" class="promotionalCode" value="">
      </td>
      <td>
        <label class="checkbox-inline">
          <input type="checkbox" value="">Yearly</label>
        <label class="checkbox-inline">
          <input type="checkbox" value="">Monthly</label>
      </td>
      <td id="singleprice-">$111.98</td>
      <td><i class="fa fa-times"></i>&nbsp;<a href="#">Remove</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

将此CSS添加到您的代码中：

 tr  td
 {
 border-bottom:10px solid #fff !important
 }

Answer 2

在bootstrap之后添加它，你很高兴

table {
    border-spacing: 0 2px !important;
    border-collapse: separate !important;
}

此解决方案允许您根据需要设置边框样式。 （如果您需要稍后执行）请尝试使用和不使用!important，看看没有!important是否适用于您

http://codepen.io/anon/pen/wMBvRL