webentwicklung-frage-antwort-db.com.de

Kontrollieren des Abstands zwischen Tabellenzellen

Ich versuche eine Tabelle zu erstellen, in der jede Zelle eine Hintergrundfarbe mit einem Leerraum dazwischen hat. Aber ich habe anscheinend Probleme damit.

Ich habe versucht, td Ränder festzulegen, aber es scheint keine Wirkung zu haben.

table.myclass td {
    background-color: Lime;
    margin: 12px 12px 12px 12px;
}​

Wenn ich dasselbe mit dem Auffüllen mache, funktioniert es, aber dann habe ich keinen Abstand zwischen den Zellen.

Könnte mir jemand dabei helfen?

jsFiddle: http://jsfiddle.net/BfBSM/

53
Jonathan Wood

Verwenden Sie die border-spacing -Eigenschaft für das table -Element, um den Abstand zwischen Zellen festzulegen.

Stelle sicher border-collapse ist auf separate gesetzt (oder es gibt einen einzelnen Rand zwischen jeder Zelle anstelle eines separaten Randes um jede Zelle, der einen Abstand zwischen ihnen haben kann).

77
Quentin

Überprüfen Sie diese Geige . Sie müssen einen Blick auf die Verwendung von Border-Collapse und Border-Spacing werfen. Es gibt einige Macken für IE (wie üblich). Dies basiert auf eine Antwort zu diese Frage .

HTML:

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>​

CSS:

table.test td {
    background-color: Lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}
19
Buggabill

Verwenden Sie, um den Job zu erledigen

<table cellspacing=12>

Wenn Sie lieber „Recht haben“, als Dinge zu erledigen, können Sie stattdessen die CSS-Eigenschaft border-spacing, das von einigen Browsern unterstützt wird.

3
table.test td {
    background-color: Lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

Verwenden Sie border-collapse und border-spacing, um Leerzeichen zwischen den Tabellenzellen zu erhalten. Ich würde nicht empfehlen, schwebende Zellen zu verwenden, wie von QQping vorgeschlagen.

JSFiddle

1
Halcyon