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

Please check this answer : http://stackoverflow.com/questions/10690299/how-to-add-a-margin-to-a-table-row-tr — Vincent G, Dec 30 '16 at 09:24

score 3 · Accepted Answer · answered Dec 30 '16 at 09:27

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

nashcheez · Answer 2 · 2016-12-30T09:37:27.670

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

i got this answer from Vincent G , but up vote for your helping mentality — Jishnu V S, Dec 30 '16 at 09:36

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

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

edited May 23 '17 at 12:08

Community

1
1

answered Dec 30 '16 at 09:54

Johny Santiago

99
1
10

Margin or padding not working with bootstrap table

3 Answers3