Thêm khoảng cách giữa các ô (td) bằng css

Tôi đang cố gắng thêm một bảng có khoảng cách giữa ô vì màu nền của ô là màu trắng và màu nền của bảng là màu xanh lam, bạn có thể dễ dàng thấy rằng phần đệm và lề không hoạt động (tôi đang áp dụng nó cho td), nó sẽ chỉ thêm không gian bên trong ô.

Bạn muốn border-spacing:

<table style="border-spacing: 10px;">

Hoặc trong một khối CSS ở đâu đó:

table {
  border-spacing: 10px;
}

Xem quirksmode trên border-spacing. Hãy lưu ý rằng border-spacingnó không hoạt động trên IE7 trở xuống.

table { 
  border-spacing: 10px; 
} 

Điều này đã hiệu quả với tôi sau khi tôi xóa

border-collapse: separate;

từ thẻ bảng của tôi.

Của tôi là:

border-spacing: 10px;
border-collapse: separate;

Cân nhắc sử dụng cellspacingvà cellpaddingcác thuộc tính cho thuộc tính tablethẻ hoặc border-spacingcss.

tham số cellspacing (khoảng cách giữa các ô) của thẻ TABLE chính xác là những gì bạn muốn. Điểm bất lợi là nó là một giá trị, được sử dụng cho cả x và y, bạn không thể chọn khoảng cách hoặc khoảng đệm khác nhau theo chiều dọc / chiều ngang. Có một thuộc tính CSS, nhưng nó không được hỗ trợ rộng rãi.

Giả sử thuộc tính cellspcing/ cellpadding/ border-spacingkhông hoạt động, bạn có thể sử dụng mã như sau.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

Tôi đã thử và thành công trong khi tách nút bằng cách sử dụng chiều rộng bảng và tạo td trống là 2 hoặc 1%, nó không trả về khác hơn.

Nếu bạn muốn các giá trị riêng biệt cho các cạnh và trên-dưới.

<table style="border-spacing: 5px 10px;">