Hướng dẫn bootstrap remove row spacing - bootstrap loại bỏ khoảng cách hàng

Question

Codepen này hoạt động, nhưng tôi không chắc đây là loại bảng giống nhau.

Đây là 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//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>

Đánh giá cao bất kỳ sự giúp đỡ!

Kameron

8.9513 huy hiệu vàng8 Huy hiệu bạc22 Huy hiệu đồng3 gold badges8 silver badges22 bronze badges

Đã hỏi ngày 23 tháng 8 lúc 20:20Aug 23 at 20:20

1

Có mặc định padding: .75rem; trên td (không phải tr) từ bootstrap.

Bạn có thể loại bỏ khoảng cách bằng cách sử dụng p-0 chỉ định 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//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>

Đã trả lời ngày 23 tháng 8 lúc 20:50Aug 23 at 20:50

KameronkameronKameron

8.9513 huy hiệu vàng8 Huy hiệu bạc22 Huy hiệu đồng3 gold badges8 silver badges22 bronze badges

1