Tabelle Padding funktioniert nicht

Question

Ich habe eine Tabelle, die innerhalb eines Elternteil div voller Text und andere Inhalte sitzt. Ich habe folgende CSS, die nicht zu funktionieren scheinen:

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

Wenn ich Margen anstelle von Polstern, es funktioniert-jedoch mit Breite: 100%, wobei die Margen das Ganze aus der Mutter div scoots. Ich denke, ich könnte die Breite reduzieren oder eine genaue Pixelanzahl angeben, aber der Rest der Seite skaliert mit der Bildschirmgröße und ich würde mir wünschen, dass dies auch so funktioniert.

Answer 1

Es gibt einige spezielle Eigenschaften in Bezug auf Tabellen. Derjenige, den Sie suchen, ist border-spacing.

table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0 50px; 
} 

Beispiel: http://jsfiddle.net/feeela/fPuQ6/

UPDATE: Nachdem das Spiel mit meiner eigenen Geige Ich muss zugeben, dass ich sagen, falsch war, dass „eine Tabelle, keine Polsterung hat“. Die Polsterung auf dem Tisch funktioniert gut - zumindest in Chrome und Opera (12). Der folgende Ausschnitt sollten Sie wollen wollen:

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

Siehe die aktualisierte Version der Geige: http://jsfiddle.net/feeela/fPuQ6/3/

Dennoch frage ich mich immer noch, warum die Polsterung nicht auf die Breite als für ein Element hinzugefügt wird mit display: block;.

Siehe auch:

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables

Answer 2

Sie können die Zellauffüllung in der Tabellendefinition hinzufügen oder wenn Sie CSS verwenden möchten, dann können Verwendung versuchen, diese :

Bei Verwendung von 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 inline mit:

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

Sie können dies hier in Aktion sehen: http://jsfiddle.net/b5NW5/1/

Hoffe, es hilft

Answer 3

Der Stand der Antwort zeigt, dass CSS festlegen border- [Richtung] für ea Richtung getrennt. Aber eine viel einfachere css-only-Lösung, die den alten table cellpadding="7" border="1" repliziert, kann der folgende sein. In CSS:

table { 
    border-collapse:collapse; 
    width: 100%; 
} 
td { 
    padding: 7px; 
    border:1px solid; 
} 

in dieser Geige dargestellt: http://jsfiddle.net/b5NW5/77