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

90

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.

html css

— Amra
źródło

2

możliwy duplikat Jak ustawić wypełnienie komórek i odstępy między komórkami w CSS?

— użytkownik

116

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.

— Dominic Rodger
źródło

2

w IE7 i starszych możesz użyć atrybutu cellspacing w znaczniku tabeli. Możesz podać oba, aby działał również w IE. Inne przeglądarki będą nadawać priorytet stylowi.

— Tor Valamo,

36

table { 
  border-spacing: 10px; 
}

To zadziałało po usunięciu

border-collapse: separate;

z mojego tagu tabeli.

— Kelly
źródło

1

oddzielne zamiast oddzielne, ale pomogło mi :-)

— FredRoger

Tak, nie wiedziałem, że też musisz zmienić „zawalenie się granicy”. To powinna być prawidłowa odpowiedź.

— jleggio

31

Mój jest:

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

— JanBorup
źródło

1

Muszę dodać właściwość css boder-collapse, aby margines zadziałał. dzięki

— ufk

4

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

— Kniganapolke
źródło

4

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.

— SF.
źródło

2

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.

— Baran
źródło

0

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

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

— obliviJohn
źródło