边距或填充不使用引导程序表

时间：2016-12-30 09:12:28

标签： html css twitter-bootstrap css3

我有一个自助表，我给了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-->

3 个答案:

答案 0 :(得分：3)

您可以在表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-->

答案 1 :(得分：1)

默认情况下，您无法将margin应用于表格行。

您可以使用border-collapse: separate并将padding提供给<td>。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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-->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用border-spacing属性，该属性与bootstrap表的margin类似，如下所示：

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

参考文献来自：Bootstrap table margin

相关问题
最新问题