Tabelle Polsterung nicht funktioniert

Ich habe eine Tabelle, die sich innerhalb eines übergeordneten div voller Körper, text und andere Inhalte. Ich habe folgende CSS-das scheint nicht zu funktionieren:

table {width:100%; padding: 0 50px 0 50px;}

Wenn ich die Margen anstelle von padding, funktioniert es—allerdings mit width:100%, mit Margen scoots die ganze Sache aus der übergeordneten div. Ich denke, ich könnte die Breite verringern, oder geben Sie eine exakte pixel-Menge, aber der rest der Seite skaliert mit der Display-Größe, und ich möchte diese Arbeit auch so.

Sie können die Marge und die Breite der Tabelle Prozentwerte.
mögliche Duplikate von: stackoverflow.com/questions/1750670/...

InformationsquelleAutor Hank | 2014-02-18

18

Gibt es einige Besondere Eigenschaften im Zusammenhang mit Tabellen. Die, die Sie suchen, ist border-spacing.
```
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 50px;
}
```
Beispiel: http://jsfiddle.net/feeela/fPuQ6/

UPDATE: Nach dem Spiel mit meiner eigenen Geige muss ich zugeben, dass ich falsch war, indem Sie sagen, dass "eine Tabelle nicht über eine Polsterung". Die Polsterung auf dem Tisch ist in Ordnung, die – zumindest bei der Anzeige in Chrome und Opera (12). Der folgende Codeausschnitt tun sollten, wollen Sie auch wollen:
```
table {
    width: 100%;
    padding: 0 50px 0 50px;
}
```
Finden Sie die aktualisierte version von der Fiedel: http://jsfiddle.net/feeela/fPuQ6/3/

Doch ich bin immer noch Fragen, warum die Polsterung ist nicht Hinzugefügt, um die Breite für ein element mit display: block;.

Siehe auch:
InformationsquelleAutor feeela
3

Vorherige Antwort zeigt, dass css kann eingestellt Grenze-[Richtung] für ea-Richtung getrennt. Aber eine viel einfachere css-only-Lösung repliziert die old-style - table cellpadding="7" border="1" werden kann, die folgenden. CSS:
```
table { 
  border-collapse:collapse;
  width: 100%;
}
td {
  padding: 7px;
  border:1px solid;
} 
```
In diesem fiddle: http://jsfiddle.net/b5NW5/77

InformationsquelleAutor murspieg

Können Sie den Textabstand in der Tabelle definition ODER, wenn Sie möchten, verwenden Sie CSS, verwenden Sie dann versuchen, diese:

Wenn mit CSS:

<style type="text\css">
.table {
        width: 100%;        
        border-top:1px solid red;
        border-right:1px solid red;
        border-collapse:collapse;
    }
.table td {
    padding: 7px;
    border-bottom:1px solid red;
    border-left:1px solid red;
}
</style>

<table class="table">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

Wenn die Verwendung von inline:

<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>