4 Wege, eine Tabelle nur mit inneren Rändern zu erstellen (Tic-Tac-Toe Stil)

Wie ein Tic-Tac-Toe-Brett. Ich habe neulich darüber nachgedacht, wie man eine Tabelle nur mit inneren Rändern erstellt, wie man das eben so macht. Mir fallen drei Wege ein. Einer davon erfordert eine ganze Reihe von Regeln und ist die Art, wie ich intuitiv denke. Einer verwendet ein veraltetes Attribut, und einer ist sehr einfach und fühlt sich ein bisschen wie ein CSS-Trick an.

Möglichkeit #1) Die nicht benötigten Ränder entfernen

Das ist die erste Methode, die mir einfällt. Füge überall einen Rand hinzu und entferne dann den Rand auf der

1. Oberseite jeder Zelle in der ersten Zeile
2. Unterseite jeder Zelle in der letzten Zeile
3. Linken Seite der ersten Zelle in jeder Zeile
4. Rechten Seite der letzten Zelle in jeder Zeile

table {
  border-collapse: collapse;
}
table td {
  border: 5px solid black; 
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:last-child {
  border-right: 0;
}

Möglichkeit #2) Das rules Attribut

Dies wird nicht empfohlen, da es ein veraltetes Attribut ist. Aber genau dafür war das rules Attribut gedacht.

Sie können die Farbe mit border-color steuern, aber nicht border-width oder border-style.

Möglichkeit #3) Verwendung von border-style: hidden;

Dies ist die, die sich für mich wie ein CSS-Trick anfühlt.

table {
  border-collapse: collapse;
  border-style: hidden;
}
table td {
  border: 5px solid black;
}

MDN hat eine Erklärung

Im Falle von Tabellenzellen und Randkollaps hat der Wert `hidden` die höchste Priorität: Das bedeutet, dass, wenn ein anderer widersprüchlicher Rand gesetzt ist, dieser nicht angezeigt wird.

Indem man border-style: hidden; auf die Tabelle selbst anwendet, bedeutet dies, dass "hidden" am äußeren Rand gewinnt, aber nur am äußeren Rand, nicht an den anderen Rändern der inneren Zellen.

Möglichkeit #4: Verwenden der outline Eigenschaft

Carter Li schrieb darüber und forderte mich dann heraus

Vielleicht könnte etwas wie dieses Tic-Tac-Toe-Brett, das Chris vor einigen Jahren zusammengestellt hat, von outline profitieren, anstatt auf individuell gestaltete Zellränder zurückzugreifen. Herausforderung angenommen, Herr Coyier? 😉

Ich muss diese Herausforderung annehmen! Es sieht so aus, als ob es dank outline-offset möglich ist!

table {
  outline: 2px solid white;
  outline-offset: -2px;
}
table td {
  outline: 2px solid black;
}

Möglichkeit #5: Verläufe

Bonus! Temani Afif hat einen Weg gefunden, dies mit einem einzelnen konischen Verlauf zu tun. Es haut mich um, daher werde ich nicht versuchen, es zu erklären.

---

Können Sie sich andere Wege vorstellen?