How to remove space between Bootstrap table rows?-CodePudding

This Codepen works, but I'm not sure this is the same table type.

This is the Fiddle.

#buyer {
  border-collapse: separate;
  border-spacing: 0 0px;
}

tr {
  background: pink; /* added by community */
}

<head>
  <base target="_top">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
  <div id="buyerTable" >
    <table  id="buyer">
      <thead style="white-space: nowrap">
        <tr>
          <th >Comprador</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <select id="selectBuyer" name="select" required="required"  onchange="loadAddress('buyer', this)">
              <option value=""></option>
            </select>
          </td>
        </tr>
        <tr>
          <td >Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
        </tr>
      </tbody>
    </table>
  </div>

Appreciate any help!

CodePudding user response：

There is default padding: .75rem; on td (not tr) from the Bootstrap.

You can eliminate the spacing by using the p-0 which specifies padding: 0;.

#buyer {
  border-collapse: separate;
  border-spacing: 0 0px;
}

tr {
  background: pink;
  /* added by community */
}

<head>
  <base target="_top">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
  <div id="buyerTable" >
    <table  id="buyer">
      <thead style="white-space: nowrap">
        <tr>
          <th >Comprador</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td >
            <select id="selectBuyer" name="select" required="required"  onchange="loadAddress('buyer', this)">
              <option value=""></option>
            </select>
          </td>
        </tr>
        <tr>
          <td >Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
        </tr>
      </tbody>
    </table>
  </div>

CodePudding user response：

I would like to know what you want to emulate is the one you have in the Codepen.io?. You should check that in your Fiddle editor you have just one per and in the Codepen one you have one and inside two .