Dodaj spację między komórkami (td) za pomocą CSS

Próbuję dodać tabelę ze spacją między komórkami, ponieważ kolor tła komórki jest biały, a tło tabeli jest niebieskie, łatwo widać, że dopełnienie i marginesy nie działają (stosuję to do td), doda tylko przestrzeń wewnątrz komórki.

Chcesz border-spacing:

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

Lub gdzieś w bloku CSS:

table {
  border-spacing: 10px;
}

Zobacz quirksmode na border-spacing. Należy pamiętać, że border-spacingnie działa w IE7 i starszych.

table { 
  border-spacing: 10px; 
} 

To zadziałało po usunięciu

border-collapse: separate;

z mojego tagu tabeli.

Mój jest:

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

Rozważ użycie atrybutów cellspacingi cellpaddingdla tabletagu lub border-spacingwłaściwości css.

parametr cellspacing (distance between cells) znacznika TABLE jest dokładnie tym, czego potrzebujesz. Wadą jest to, że jest to jedna wartość, używana zarówno dla x, jak i y, nie możesz wybrać różnych odstępów lub dopełnienia w pionie / poziomie. Istnieje również właściwość CSS, ale nie jest ona szeroko obsługiwana.

Załóżmy, że właściwość cellspcing/ cellpadding/ border-spacingnie zadziałała, możesz użyć kodu w następujący sposób.

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

Próbowałem i udało mi się, oddzielając przycisk za pomocą table-width i ustawiając pusty td jako 2 lub 1%, nie zwraca więcej.

Jeśli chcesz mieć osobne wartości dla boków i góry-dołu.

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