Entfernen unerwünschter Tabellenzellenränder mit CSS

Ich habe ein merkwürdiges und frustrierendes Problem. Für das einfache Markup:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

Ich wende unterschiedliche Hintergrundfarbenwerte auf die ungeraden Elemente thead , tr und tr an . Das Problem ist, dass in den meisten Browsern jede Zelle einen unerwünschten Rand hat, der nicht die Farbe einer der Tabellenzeilen hat. Nur in Firefox 3.5 hat die Tabelle in keiner Zelle Rahmen.

Ich möchte nur wissen, wie diese Ränder in den anderen Hauptbrowsern entfernt werden, damit Sie in der Tabelle nur die abwechselnden Zeilenfarben sehen.

Sie müssen dies zu Ihrem CSS hinzufügen:

table { border-collapse:collapse }

füge etwas CSS hinzu:

td, th {
   border:none;
}

Ändern Sie Ihren HTML-Code wie folgt:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(Ich fügte hinzu border="0" cellpadding="0" cellspacing="0")

In CSS können Sie Folgendes tun:

table {
    border-collapse: collapse;
}

Um den Rand zu entfernen, verwenden Sie CSS wie folgt:

td {
 border-style : hidden!important;
}

Setzen Sie das cellspacingAttribut der Tabelle auf 0.

Sie können auch den CSS-Stil verwenden, border-spacing: 0jedoch nur, wenn Sie ältere IE-Versionen nicht unterstützen müssen.

Möglicherweise möchten Sie auch hinzufügen

table td { border:0; }

Das Obige entspricht dem Setzen von cellpadding = "0".

Dadurch wird das Auffüllen von Zellen, die von Browsern automatisch zu Zellen hinzugefügt werden, entfernt. Dies kann vom Doctype und / oder einem CSS abhängen, das zum Zurücksetzen der Standardbrowser-Stile verwendet wird

Nachdem ich die obigen Vorschläge ausprobiert hatte, funktionierte das einzige, was für mich funktionierte, das Ändern des Rahmenattributs in "0" in den folgenden Abschnitten der Datei style.css eines untergeordneten Themas (führen Sie eine "Suchen" -Operation aus, um die einzelnen Vorschläge zu finden - die folgenden sind nur Schnipsel):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

So sieht es danach aus:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

Versuchen Sie, border: 0px; border-collapse: collapse;dem Tabellenelement den Stil zuzuweisen.

manchmal sogar nach dem Löschen borders.

Der Grund ist, dass Sie Bilder in der haben td, die Bilder display:blocklösen.