HTML Tabelle border-style für einzelne Zelle?

Guten Abend,

ich stecke gerade fest und schaffe es nicht, so eine Tabelle in HTML zu machen:

Die verbundenen borders mache ich mit border-collapse, aber dann sind die borders der einzelnen Zelle ja weg und die gestrichelte border der linken und rechten Zelle sind unsichtbar. Ohne border-collapse habe ich aber zwei Ränder, was ich nicht möchte. Und ohne border an der Tabelle, sondern nur für die Zellen, sind die Zellen nicht mehr verbunden und es entstehen Lücken zwischen ihnen.

Vielleicht weiß ja jemand von euch, wie das zu machen ist.

Liebe Grüße!

Answer 1

[regex9]

Mit border-collapse kannst du den Abstand zwischen den Zellen entfernen. Anschließend muss nur noch der Rahmen je Zelle gesetzt werden, wobei du dir die erste und letzte Zelle jeweils via Selektor mit Pseudoklasse herausgreifen kannst.

HTML:

<table class="custom-table">
  <tr class="custom-table-row">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS:

.custom-table {
  border-collapse: collapse;
}

.custom-table-row {
  td {
    border: 1px solid;
    height: 50px;
    width: 50px;
  }

  td:first-child,
  td:last-child {
    border-style: dashed;  
  }
}

Bezüglich deines HTML-Dokuments, welches du hier verlinkt hast, solltest du übrigens beachten, dass es mehrere Markupfehler enthält.

1. Der Doctype fehlt sowie ein title-Element im head-Bereich.
2. Ein Paragraph gehört nicht in ein h2-Element (o.a. h?-Elemente). Es ist eben ein Textabschnitt, der stattdessen von einer Überschrift kategorisiert werden könnte. In deinem Fall brauchst du im Übrigen kein Subelement für die h2, welches den Textknoten gesondert einrahmt.
3. Ein br-Element darf kein direktes Kindelement eines table-Elements sein. Du kannst es in dem Kontext lediglich in ein td- oder th-Element packen. Um für die Tabelle einen Abstand nach oben zu schaffen, setze CSS ein (margin-top).
4. Alle Elemente (mit Ausnahme von html und Kommentaren) gehören entweder in den head- oder in den body-Bereich. Das gilt also ebenso für deine script-Tags am Ende des Dokuments.

Comments

[Emiliauwu]

Vielen Dank für deine tolle Antwort! <3

Answer 2

[knowsNothing775]

Das border-collapse ist schon kein HTML mehr, sondern CSS.

Ich frage mich, wie dein Code für deine Tabelle an sich aussieht.

Wenn ich es richtig verstehe, willst du die äußeren zwei Zellen gepunktet. Dafür sprichst du die beiden am Besten einfach getrennt an, unabhängig von der Tabelle. Über die CSS-Eigenschaft border kannst du dann die gepunktete Linie erstellen. Ein gutes Beispiel für das Design der Tabellen gibt es hier: https://www.w3schools.com/Css/tryit.asp?filename=trycss_table_fancy

Comments

[Emiliauwu]

Das klappt leider nicht. Oder ich bin zu blöd. Meinen Code kannst du dir gerne ansehen/ausprobieren:

https://pastebin.com/8PN7Bu1r Ist leider zu lang für gutefrage daher der pastebin

[knowsNothing775]

@Emiliauwu

Jag den Code einfach Mal durch Gemini oder ChatGPT

Answer 3

[iQa1x]

Mache das Ränder-CSS nur für td und nicht zusätzlich noch für tr, die Werte für tr überschreiben die Werte für die td offenbar bei dem border-collapse.