Cellpadding und Cellspacing in CSS festlegen?

Question

In einer HTML-Tabelle ist die cellpadding y cellspacing kann auf diese Weise eingestellt werden:

<table cellspacing="1" cellpadding="1">

Wie kann dasselbe mit CSS erreicht werden?

Answer 1

Verwenden Sie einfach border-collapse: collapse für Ihren Tisch, und padding für th oder td .

Answer 2

TBH. Für all das Herumfummeln mit CSS könnten Sie genauso gut einfach verwenden cellpadding="0" cellspacing="0" da sie nicht veraltet sind...

Schlägt noch jemand Margen für <td> hat dies offensichtlich noch nicht ausprobiert.

Answer 3

Verwenden Sie einfach CSS-Padding-Regeln mit Tabellendaten:

td { 
    padding: 20px;
}

Und für die Randabstände:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Allerdings kann es in älteren Browsern wie dem Internet Explorer aufgrund der unterschiedlichen Implementierung des Box-Modells zu Problemen kommen.

Answer 4

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Answer 5

Nach dem, was ich aus den W3C-Klassifikationen verstanden habe, sind <table> s sind 'nur' für die Anzeige von Daten gedacht.

Auf dieser Grundlage fand ich es viel einfacher, eine <div> mit den Hintergründen und all dem, und eine Tabelle mit Daten, die darüber schweben, mit position: absolute; y background: transparent; ...

Es funktioniert mit Chrome, Internet Explorer (6 und höher) und Mozilla Firefox (2 und höher).

Ränder werden verwendet (oder sind jedenfalls dafür gedacht), um einen Abstand zwischen Containerelementen zu schaffen, wie <table> , <div> y <form> , nicht <tr> , <td> , <span> oder <input> . Wenn Sie es für etwas anderes als Containerelemente verwenden, werden Sie damit beschäftigt sein, Ihre Website für zukünftige Browser-Updates anzupassen.