Jak określić dopełnienie tabeli w CSS? (tabela, bez wypełniania komórek)

Question

Mam tabelę z kolorowym tłem i muszę określić dopełnienie między tabelą a jej zawartością, I.E. komórki.
Znacznik tabeli prawdopodobnie nie akceptuje wartości dopełnienia.
Firebug pokazuje tabelę i układ tbody z padding 0, ale nie akceptuje żadnej wprowadzonej wartości, więc domyślam się, że po prostu nie mają właściwości padding.
Ale chodzi o to, że chcę mieć taki sam podział między komórkami niż górne komórki z blatem i dolnymi komórkami z dolnym stołem.
Ponownie, to, czego chcę, to nie dopełnianie komórek.

EDIT: Dzięki temu, czego teraz potrzebowałem, zdałem sobie sprawę, był odstęp między wierszami lub jego odpowiednik html, przestrzeń między komórkami.
Ale z jakiegoś powodu nie robią nic na stronie, nad którą pracuję.
Oba działają świetnie na oddzielnym kodzie HTML, ale na stronie nie.
Pomyślałem, że może to być jakiś styl nadpisujący właściwość, ale przestrzeń między komórkami i wbudowane odstępy między wierszami nie powinny zostać nadpisane, prawda?
(Używam firefox)

EDYCJA 2: Nie, wypełnianie TD NIE jest tym, czego potrzebuję. W przypadku padów TD, górne i dolne wyściółki sąsiednich komórek sumują się, więc istnieje podwójna przestrzeń (pad faktycznie) między dwiema komórkami niż między górną komórką a górną krawędzią stołu. Chcę mieć dokładnie taką samą odległość między nimi.

Answer 1

Najprostszym/najlepiej zalecaną metodą jest użycie <table cellspacing="10">

Sposób css: border-spacing (nie obsługiwane przez IE nie sądzę)

<!-- works in firefox, opera, safari, chrome --> 
 
    <style type="text/css"> 
 
    
 
    table.foobar { 
 
    \t border: solid black 1px; 
 
    \t border-spacing: 10px; 
 
    } 
 
    table.foobar td { 
 
    \t border: solid black 1px; 
 
    } 
 
    
 
    
 
    </style> 
 
    
 
    <table class="foobar" cellpadding="0" cellspacing="0"> 
 
    <tr><td>foo</td><td>bar</td></tr> 
 
    </table>

Edycja: jeśli chcesz tylko umieścić zawartość komórki, a nie spację, możesz po prostu użyć

<table cellpadding="10"> 

LUB

td { 
    padding: 10px; 
} 

Answer 2

Możesz wypróbować właściwość border-spacing. To powinno robić, co chcesz. Ale może chcesz zobaczyć to answer.

Answer 3

Nie możesz ... Może, jeśli zamieściłeś obrazek pożądanego efektu, jest inny sposób, aby to osiągnąć.

Na przykład można zawinąć całą tabelę w DIV i ustawić dopełnienie na div.

Answer 4

Można ustawić margines dla tabeli. Alternatywnie, zawiń tabelę w div i użyj dopełnienia div.

Answer 5

Zabawne, właśnie to robiłem wczoraj. Po prostu trzeba to w pliku css

.ablock table td { 
    padding:5px; 
} 

następnie owinąć tabelę w odpowiednim div

<div class="ablock "> 
<table> 
    <tr> 
    <td> 

Answer 6

CSS naprawdę nie pozwalają to zrobić na poziomie tabeli. Generalnie określam cellspacing="3" kiedy chcę osiągnąć ten efekt. Oczywiście nie jest to rozwiązanie css, więc weź to za to, co jest warte.

Answer 7

W przypadku css tabela może mieć wypełnienie niezależnie od jej komórek.

Własność padding nie jest dziedziczona przez potomka.

Więc określenia:

table { 
    padding: 5px; 
} 

powinno działać. Możesz również wyraźnie powiedzieć przeglądarce, jak należy podkładać (lub w tym przypadku nie podkładać) swoje komórki.

td { 
    padding: 0px; 
} 

EDIT: Nie jest obsługiwany przez IE8. Przepraszam.

Answer 8

Oto co należy rozumieć temat tabel ... Oni nie są drzewo zagnieżdżonych niezależnych elementów. Są pojedynczym złożonym elementem. Podczas gdy poszczególne niszczyciele zachowują się mniej więcej tak, jak elementy bloków CSS, elementy pośrednie (wszystko między tabelą a TD, w tym TRs i TBODY) są niepodzielne i nie mieszczą się w ani w linii ani bloku . Żadne losowe elementy HTML nie są dozwolone w tej przestrzeni innego wymiaru, a rozmiar takiej przestrzeni innego wymiaru nie jest w ogóle konfigurowany za pomocą CSS. Tylko własność HTML cellspacing może się do niej dostać, a ta właściwość nie ma analogów w CSS.

Tak więc, aby rozwiązać swój problem, bym sugerować albo otoki DIV jak sugeruje inny plakat, lub jeśli absolutnie muszą zachować to zawarte w tabeli, masz ten brzydki śmieci:

<style> 
    .padded tr.first td { padding-top:10px; } 
    .padded tr.last td { padding-bottom:10px; } 
    .padded td.first { padding-left:10px; } 
    .padded td.last { padding-right:10px; } 
</style> 

<table class='padded'> 
    <tr class='first'> 
     <td class='first'>a</td><td>b</td><td class='last'>c</td> 
    </tr> 
    <tr> 
     <td class='first'>d</td><td>e</td><td class='last'>f</td> 
    </tr> 
    <tr class='last'> 
     <td class='first'>g</td><td>h</td><td class='last'>i</td> 
    </tr> 
</table> 

Answer 9

table { 
    border: 1px solid transparent; 
} 

Answer 10

jest jeszcze inny trik:

/* Padding on the sides of the table */ 
table th:first-child, .list td:first-child { padding-left: 28px; } 
table th:last-child, .list td:last-child { padding-right: 28px; } 

(tylko zobaczyłem go w mojej obecnej pracy)

Answer 11

table { 
    background: #fff; 
    box-shadow: 0 0 0 10px #fff; 
    margin: 10px; 
    width: calc(100% - 20px); 
}