Wie man mit CSS die Tabellengrenzen unsichtbar macht

Question

Ich weiß, dass dies eine oft gestellte Frage ist, aber ich habe einige der Lösungen ausprobiert (wie Wie lassen sich trennende Linien/Grenzen in einer Tabelle mit CSS verschwinden?), aber ich schaffe es immer noch nicht ganz.

Ich habe über CSS eine Tabellenstruktur mit abwechselnden Zeilenfarben definiert. Ich möchte, dass die (insbesondere vertikalen) Grenzen zwischen den Zellen unsichtbar sind und nehme daher an, dass entweder eine Randbreite von null td erforderlich ist oder die abwechselnden td-Randfarben mit den Hintergrundfarben übereinstimmen müssen.

Das unten stehende Beispiel zeigt, was ich versucht habe. Beim Aufrufen einer table1-ID aus HTML bekomme ich eine schön abwechselnd farbige Zeilentabelle, aber mit offensichtlichen Zellgrenzen - ich würde mich über Ihre Hilfe freuen.

#table1 table, tr, td, th {
     border: 0;
}

#table1 tbody tr:nth-child(odd) {
     background-color: #A3B9D2; 
}

#table1 tbody tr:nth-child(even) {
     background-color: #E7EDF3;
}

und dann ein Beispiel für HTML;

     Test(Wert)

     Test2(Wert2)

Answer 1

Es ist möglich, dass das, was du beschreibst, der Zellenabstand ist. Wenn das der Fall ist, versuche es in deinem HTML-Code mit:

  ...

Zellabstand bezieht sich auf den Abstand zwischen Zellen; es ist nicht genau ein Rahmen. Also, wenn du unsichtbare oder nicht eingefärbte Abstände zwischen deinen td-Elementen siehst, versuche das cellspacing="0" Attribut zu deinem table-Tag hinzuzufügen.

Answer 2

Sie können auch diesen Stil verwenden:

#table1 {border:0px solid transparent;}

Answer 3

Versuche dies

#table1 {
   border-collapse: collapse;
}

Answer 4

Die Verwendung von cellspacing="0" ist in der Tat ein sicherer Weg, um diese lästigen Linien loszuwerden. Aber persönlich habe ich das nie gemocht - weil ich es in jedem einzelnen Tisch anwenden muss, den ich auf einer Website erstelle, anstatt an einer ordentlichen, zentralen Stelle.

Also entscheide ich mich in der Regel für eine Lösung wie elclanrs's in einer CSS-Datei. Das Gute an dieser Lösung ist, dass Sie einige der Tags davor entfernen können, um Linien/Rahmen nur für diese anzuwenden.

Mit anderen Worten, um einen Rahmen um einen Tisch zu setzen - ohne dass alle Zellen auch zwischen Linien aufgeteilt werden - können Sie etwas Ähnliches wie dies tun:

tr, td, th
{
  border: 0;
}

Viel Glück!

Answer 5

#table1 Tabelle, tr, td, th {} ist falsch.

Du solltest machen:

#table1,
#table1 tr,
#table1 td { border: 0; }