Margin or padding not working with bootstrap table

Question

I have a bootstrap table i gave margin to tr but tr not getting the margin, i don't know why this happening anybody please help me to find this. i have applied this class

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

try the snippet

 .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

You can get the wanted output with border-collapse property on table parent :

.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

You cannot apply margin to table rows by default.

What you can do instead is use border-collapse: separate and give padding to your <td> s.

 .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

You can use border-spacing property which works similar to margin for bootstrap table as following:

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

Reference taken from: Bootstrap table margin