表中的自舉4間距

Question

如果放入表中，輸入組的元素之間存在間隙。

<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/> 
 
<p>This is fine</p> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">a</div> 
 
     <div class="input-group-addon">b</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td>There is a gap between spans in tables</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="input-group"> 
 
     <div class="input-group-addon">a</div> 
 
     <div class="input-group-addon">b</div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

我怎樣才能擺脫這種差距？

Answer 1

您可以嘗試刪除表中添加的border-spacing。或者，如果您偏好外觀的方式，則可以將border-collapse設置爲collapse。

border-spacing is inherited by default in CSS by child elements。 input-group設置爲display: table這意味着它從父表繼承borders-spacing: 2px。這意味着它將被應用於input-group-addon，因爲它們被顯示爲表格單元格。

table .input-group { 
 
    border-spacing: 0; 
 
}

<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/> 
 
<p>This is fine</p> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">a</div> 
 
     <div class="input-group-addon">b</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td>Previously a gap between elements</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="input-group"> 
 
     <div class="input-group-addon">a</div> 
 
     <div class="input-group-addon">b</div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>