如何删除Bootstrap表行之间的空格？

6za6bjd0 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(201)

This Codepen可以工作，但我不确定这是同一个表类型。
这是小提琴。

#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/bootstrap-icons@1.8.3/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" class="table-bordered">
    <table class="table table-borderless" id="buyer">
      <thead style="white-space: nowrap">
        <tr>
          <th class="text-center">Comprador</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
              <option value=""></option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="address">Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
        </tr>
      </tbody>
    </table>
  </div>

感谢您的帮助！

twitter-bootstrap

来源：https://stackoverflow.com/questions/73464664/how-to-remove-space-between-bootstrap-table-rows

1条答案

按热度按时间

fhg3lkii1#

在 Bootstrap 的td（不是tr）上存在默认的padding: .75rem;。
可以使用指定padding: 0;的p-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/bootstrap-icons@1.8.3/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" class="table-bordered">
    <table class="table table-borderless mb-0" id="buyer">
      <thead style="white-space: nowrap">
        <tr>
          <th class="text-center">Comprador</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="p-0">
            <select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
              <option value=""></option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="address p-0">Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
        </tr>
      </tbody>
    </table>
  </div>

赞(0）回复(0）举报 2022-12-16

我来回答

如何删除Bootstrap表行之间的空格？

1条答案

相关问题

热门标签

最新问答