邊距或填充不能與引導表一起使用

Question

我有一個引導表，我給tr提供了保證金，但是tr沒有得到保證金，我不知道為什么有人會發生這種情況，請幫助我找到它。 我已經上了這堂課

.table-body tr {
  margin-bottom: 25px;
}

嘗試摘錄

 .summery-selected-items { width: 100%; background: #f9fafb; border: #dadada solid 1px; float: left; padding: 30px; } .summery-selected-items h4 { font-family: 'Raleway-Medium'; font-size: 24px; color: #000; margin-bottom: 15px; } .summery-selected-items table { margin-bottom: 35px; width: 100%; } .summery-selected-items table th { font-family: 'Raleway-Regular'; font-size: 18px; color: #000000; padding: 10px 0px; } .summery-selected-items .padding { padding: 10px 20px; } .summery-selected-items table td { font-family: 'Raleway-Regular'; font-size: 15px; color: #777777; padding: 10px 15px; vertical-align: middle; } .selected-first { display: table; } .selected-first img { float: left; } .selected-first .select-name { display: table-cell; padding-left: 20px; vertical-align: middle; width: auto; } .table-body tr { margin-bottom: 25px; } .selected-first img { width:100px; height:100px; background:#000; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section class="content-section"> <div class="container"> <div class="summery-selected-items"><!--Selected Items--> <h4>Selected Items</h4> <table> <thead> <tr class="hidden-xs tablehead"> <th>Services</th> <th class="text-center padding">Date </th> <th class="text-center padding">Unit Price</th> <th class="text-right padding">Total</th> </tr> </thead> <tbody class="table-body"> <tr class="tablecontent"> <td class="selected-first"><span class="td-name visible-xs">Services</span> <img src="images/select-img1.jpg" alt=""/> <div class="select-name">Magic Show</div></td> <td class="text-center"><span class="td-name visible-xs">Date</span> January 10, 2016 </td> <td class="text-center"><span class="td-name visible-xs">Unit Price</span> KD 100.000 </td> <td class="text-right"><span class="td-name visible-xs">Total</span> KD 100.000 </td> </tr> <tr class="tablecontent"> <td class="selected-first"><span class="td-name visible-xs">Services</span> <img src="images/select-img1.jpg" alt=""/> <div class="select-name">Magic Show</div></td> <td class="text-center"><span class="td-name visible-xs">Date</span> January 10, 2016 </td> <td class="text-center"><span class="td-name visible-xs">Unit Price</span> KD 100.000 </td> <td class="text-right"><span class="td-name visible-xs">Total</span> KD 100.000 </td> </tr> </tbody> </table> </div> <!--Selected Items--> </div> <!--container--> </section> <!--content-section--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--jquery.min--> 

Answer 1

您可以在表parent上使用border-collapse屬性獲得所需的輸出：

.summery-selected-items table {
    border-collapse: separate;
    margin-bottom: 35px;
    width: 100%;
}

 .summery-selected-items { width: 100%; background: #f9fafb; border: #dadada solid 1px; float: left; padding: 30px; } .summery-selected-items table { border-collapse: separate; margin-bottom: 35px; width: 100%; } .summery-selected-items h4 { font-family: 'Raleway-Medium'; font-size: 24px; color: #000; margin-bottom: 15px; } .summery-selected-items table { margin-bottom: 35px; width: 100%; } .summery-selected-items table th { font-family: 'Raleway-Regular'; font-size: 18px; color: #000000; padding: 10px 0px; } .summery-selected-items .padding { padding: 10px 20px; } .summery-selected-items table td { font-family: 'Raleway-Regular'; font-size: 15px; color: #777777; padding: 10px 15px; vertical-align: middle; } .selected-first { display: table; } .selected-first img { float: left; } .selected-first .select-name { display: table-cell; padding-left: 20px; vertical-align: middle; width: auto; } .table-body tr { margin-bottom: 25px; } .selected-first img { width:100px; height:100px; background:#000; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section class="content-section"> <div class="container"> <div class="summery-selected-items"><!--Selected Items--> <h4>Selected Items</h4> <table> <thead> <tr class="hidden-xs tablehead"> <th>Services</th> <th class="text-center padding">Date </th> <th class="text-center padding">Unit Price</th> <th class="text-right padding">Total</th> </tr> </thead> <tbody class="table-body"> <tr class="tablecontent"> <td class="selected-first"><span class="td-name visible-xs">Services</span> <img src="images/select-img1.jpg" alt=""/> <div class="select-name">Magic Show</div></td> <td class="text-center"><span class="td-name visible-xs">Date</span> January 10, 2016 </td> <td class="text-center"><span class="td-name visible-xs">Unit Price</span> KD 100.000 </td> <td class="text-right"><span class="td-name visible-xs">Total</span> KD 100.000 </td> </tr> <tr class="tablecontent"> <td class="selected-first"><span class="td-name visible-xs">Services</span> <img src="images/select-img1.jpg" alt=""/> <div class="select-name">Magic Show</div></td> <td class="text-center"><span class="td-name visible-xs">Date</span> January 10, 2016 </td> <td class="text-center"><span class="td-name visible-xs">Unit Price</span> KD 100.000 </td> <td class="text-right"><span class="td-name visible-xs">Total</span> KD 100.000 </td> </tr> </tbody> </table> </div> <!--Selected Items--> </div> <!--container--> </section> <!--content-section--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--jquery.min--> 

Answer 2

默認情況下，不能將margin應用於表行。

相反，您可以使用border-collapse: separate並為<td> padding 。

 .summery-selected-items { width: 100%; background: #f9fafb; border: #dadada solid 1px; float: left; padding: 30px; } .summery-selected-items h4 { font-family: 'Raleway-Medium'; font-size: 24px; color: #000; margin-bottom: 15px; } .summery-selected-items table { margin-bottom: 35px; width: 100%; border-collapse: separate; } .summery-selected-items table th { font-family: 'Raleway-Regular'; font-size: 18px; color: #000000; padding: 10px 0px; } .summery-selected-items .padding { padding: 10px 20px; } .summery-selected-items table td { font-family: 'Raleway-Regular'; font-size: 15px; color: #777777; padding: 10px 50px; vertical-align: middle; } .selected-first { display: table; } .selected-first img { float: left; } .selected-first .select-name { display: table-cell; padding-left: 20px; vertical-align: middle; width: auto; } .table-body tr { margin-bottom: 25px; } .selected-first img { width:100px; height:100px; background:#000; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section class="content-section"> <div class="container"> <div class="summery-selected-items"><!--Selected Items--> <h4>Selected Items</h4> <table> <thead> <tr class="hidden-xs tablehead"> <th>Services</th> <th class="text-center padding">Date </th> <th class="text-center padding">Unit Price</th> <th class="text-right padding">Total</th> </tr> </thead> <tbody class="table-body"> <tr class="tablecontent"> <td class="selected-first"><span class="td-name visible-xs">Services</span> <img src="images/select-img1.jpg" alt=""/> <div class="select-name">Magic Show</div></td> <td class="text-center"><span class="td-name visible-xs">Date</span> January 10, 2016 </td> <td class="text-center"><span class="td-name visible-xs">Unit Price</span> KD 100.000 </td> <td class="text-right"><span class="td-name visible-xs">Total</span> KD 100.000 </td> </tr> <tr class="tablecontent"> <td class="selected-first"><span class="td-name visible-xs">Services</span> <img src="images/select-img1.jpg" alt=""/> <div class="select-name">Magic Show</div></td> <td class="text-center"><span class="td-name visible-xs">Date</span> January 10, 2016 </td> <td class="text-center"><span class="td-name visible-xs">Unit Price</span> KD 100.000 </td> <td class="text-right"><span class="td-name visible-xs">Total</span> KD 100.000 </td> </tr> </tbody> </table> </div> <!--Selected Items--> </div> <!--container--> </section> <!--content-section--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--jquery.min--> 

Answer 3

您可以使用border-spacing屬性，該屬性的作用類似於引導表的空白，如下所示：

.summery-selected-items table {
    border-spacing: 10px 50px;
}

參考來自： Bootstrap表邊距