1. 首页
  2. 问答
  3. 保证金或填充不与引导表一起工作

保证金或填充不与引导表一起工作

2016-12-30 115 views
1

我有一个引导表，我给tr保证金但tr没有得到保证金，我不知道为什么发生这种情况，请帮助我找到这个。我已经申请该类保证金或填充不与引导表一起工作

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

尝试片断

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

来源

2016-12-30 Jishnu V S

+1

请检查这个答案：http://stackoverflow.com/questions/10690299/how-to-add-a-margin-to-a-table-row-tr –

回答

2

你可以得到border-collapse财产上的父表通缉输出：

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


.summery-selected-items { 
 
\t width: 100%; 
 
\t background: #f9fafb; 
 
\t border: #dadada solid 1px; 
 
\t float: left; 
 
\t padding: 30px; 
 
} 
 

 
.summery-selected-items table { 
 
    border-collapse: separate; 
 
    margin-bottom: 35px; 
 
    width: 100%; 
 
} 
 
.summery-selected-items h4 { 
 
\t font-family: 'Raleway-Medium'; 
 
\t font-size: 24px; 
 
\t color: #000; 
 
\t margin-bottom: 15px; 
 
} 
 
.summery-selected-items table { 
 
\t margin-bottom: 35px; 
 
\t width: 100%; 
 
} 
 
.summery-selected-items table th { 
 
\t font-family: 'Raleway-Regular'; 
 
\t font-size: 18px; 
 
\t color: #000000; 
 
\t padding: 10px 0px; 
 
} 
 
.summery-selected-items .padding { 
 
\t padding: 10px 20px; 
 
} 
 
.summery-selected-items table td { 
 
\t font-family: 'Raleway-Regular'; 
 
\t font-size: 15px; 
 
\t color: #777777; 
 
\t padding: 10px 15px; 
 
\t vertical-align: middle; 
 
} 
 
.selected-first { 
 
\t display: table; 
 
} 
 
.selected-first img { 
 
\t float: left; 
 
} 
 
.selected-first .select-name { 
 
\t display: table-cell; 
 
\t padding-left: 20px; 
 
\t vertical-align: middle; 
 
\t width: auto; 
 
} 
 
.table-body tr { 
 
\t margin-bottom: 25px; 
 
} 
 
.selected-first img { 
 
\t width:100px; 
 
\t height:100px; 
 
\t 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-->

来源

2016-12-30 09:27:57

1

你不能在默认情况下适用于margin表行。

您可以改为使用border-collapse: separate并将padding指定给您的<td> s。

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

来源

2016-12-30 09:34:53 nashcheez

+0

我从文森特G得到了这个答案，但是投票支持你的帮助 –

+0

@Naila谢谢！ :) – nashcheez

0

您可以使用边框间距属性，它的工作原理类似于保证金为举表如下：摘自

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

参考：Bootstrap table margin

来源

2016-12-30 09:54:39

相关问题

 相关问题