1. 首頁
  2. 問答
  3. 保證金或填充不與引導表一起工作

保證金或填充不與引導表一起工作

2016-12-30 79 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

相關問題

 相關問題