html - 表td之间的 margin

我需要以下布局。我尝试使用以下代码，但无法获取。我想要两排带有背景色的边距。

.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>

最佳答案

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

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

关于html - 表td之间的 margin ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34127301/