Wie legen Sie das Auffüllen von Tabellen in CSS fest? (Tabelle, nicht Zellauffüllung)

Ich habe eine Tabelle mit einem farbigen hintergrund und ich brauche, um geben Sie den Abstand zwischen der Tabelle und den Inhalt, I. E. Zellen.

Der table-tag scheint nicht zu akzeptieren, ein padding-Wert.

Firebug zeigt die Tabelle und tbody-layout mit padding 0, aber nicht jeden beliebigen Wert annehmen eingegeben, so dass ich denke, Sie haben einfach nicht die padding-Eigenschaft.

Aber die Sache ist ich möchte die gleiche Trennung zwischen den Zellen als die Zellen mit der Tischplatte und der unteren Zellen der Tabelle unten.

Wieder, was ich will, ist nicht die cell-Polsterung.

EDIT: Danke, was ich wirklich gebraucht, merke ich jetzt, war border-spacing, oder deren html-äquivalent, cellspacing.

Aber aus irgendeinem Grund, Sie tun nichts in die Website an der ich arbeite.

Beide funktionieren hervorragend auf eine eigene HTML-Datei, aber die Website Sie nicht.

Ich dachte, es könnte einige Stil überschreiben die Eigenschaft, aber cellspacing und eine inline-border-spacing sollte nicht überschrieben werden, richtig?

(Ich benutze firefox )

EDIT 2: Nein, TD Polsterung ist NICHT das, was ich brauche. Mit TD-Polsterung, oben und unten Polstern von benachbarten Zellen summieren, so gibt es den doppelten Speicherplatz (pad), zwischen zwei Zellen zwischen der oberen Zelle und der Tischplatte Grenze. Ich möchte haben genau den gleichen Abstand zwischen Ihnen.

InformationsquelleAutor der Frage Petruza | 2009-11-17

23

Könnten Sie einen Rand für die Tabelle. Alternativ wickeln Sie die Tabelle in ein div und verwenden Sie den div - Polsterung.

InformationsquelleAutor der Antwort Frank Schwieterman
21

Hier ist die Sache, die Sie sollten verstehen, über Tabellen... Sie sind nicht ein Baum von verschachtelten unabhängige Elemente. Sind Sie zu einem einzigen zusammengesetzten element. Während die einzelnen TDs Verhalten sich mehr oder weniger wie CSS block-Elemente, die zwischen-Zeug (alles zwischen der TABLE-und TD, darunter Klinken-und TBODYs) ist unteilbar und nicht fallen, entweder in inline noch block. Keine zufällige HTML-Elemente sind erlaubt, die anderen-dimensionalen Raum, und die Größe der anderen-dimensionalen Raum ist nicht konfigurierbar überhaupt durch CSS. Nur die HTML - cellspacing Eigenschaft kann auch es bekommen, und diese Eigenschaft hat keinen analog in CSS.

So, um Ihr problem zu lösen, würde ich vorschlagen, entweder ein DIV-wrapper wie ein anderer poster schon sagt, oder wenn Sie unbedingt müssen, halten Sie es in der Tabelle enthalten sind, müssen Sie diese hässliche junk:
```
<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>
```
InformationsquelleAutor der Antwort jpsimons
5

Lustig, ich Tat genau dies gestern. Sie müssen nur diese in Ihrer css-Datei
```
.ablock table td {
     padding:5px;
}
```
dann wickeln Sie die Tabelle in ein geeignetes div
```
<div class="ablock ">
<table>
  <tr>
    <td>
```
InformationsquelleAutor der Antwort Cruachan
4

Können Sie nicht... Vielleicht, wenn Sie geschrieben ein Bild von dem gewünschten Effekt gibt es eine andere Möglichkeit, es zu erreichen.

Zum Beispiel, Sie können wickeln Sie die gesamte Tabelle in ein DIV-Element, und legen Sie die Polsterung an den div.

InformationsquelleAutor der Antwort Seb
2

Mit css eine Tabelle kann Polsterung, unabhängig von dessen Zellen.

Die padding-Eigenschaft wird nicht vererbt seinen Kindern.

So, Definition:
```
table {
    padding: 5px;
}
```
Funktionieren sollte. Man könnte auch sagen, speziell, wie der browser-pad (oder in diesem Fall, nicht pad) Ihre Zellen.
```
td {
    padding: 0px;
}
```
EDIT: Nicht unterstützt IE8. Sorry.

InformationsquelleAutor der Antwort MPelletier
1

Können Sie versuchen, das border-spacing-Eigenschaft. Das sollte tun, was Sie wollen. Aber möchten Sie vielleicht, um zu sehen, diese Antwort.

InformationsquelleAutor der Antwort Vincent Ramdhanie
1

CSS nicht wirklich ermöglichen es Ihnen, dies zu tun auf einem Tisch Ebene. Generell habe ich angeben cellspacing="3" wenn ich will, um diesen Effekt zu erzielen. Offensichtlich nicht eine css-Lösung, also nehmen Sie es für was es Wert ist.

InformationsquelleAutor der Antwort localshred

Es ist ein weiterer trick :

/* 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; }

(Nur sah es bei meinem jetzigen job)

InformationsquelleAutor der Antwort Offirmo

0
```
table {
    border: 1px solid transparent;
}
```
InformationsquelleAutor der Antwort Anibal Enrique Alvarez Sifonte

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

InformationsquelleAutor der Antwort Rufina

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.