jasdefer jasdefer - 1 month ago 13
HTML Question

Bootstrap 4 spacing in tables

There is a gap between elements of an input group, if put into a table.



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





How can I get rid of this gap?

Answer

You could try removing the border-spacing added by the table. Alternatively, you can set the border-collapse to collapse if you prefer the way that looks.

border-spacing is inherited by default in CSS by child elements. input-group is set to display: table which means it inherits the borders-spacing: 2px from the parent table. This means it will be applied to input-group-addons since they are being displayed as table cells.

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>

Comments