Spaltenabstand in (responsive) Tabellen

[Werner]

Hallo,

ich möchte zwischen den spalten einer Tabelle einen kleinen Abstand definieren. Gefunden habe ich nur "border-spacing" und dies im Zusammenhang mit "border-collapse". Allerdings möchte ich keine Raster. Bisher habe ich es so gelöst:

<td>Wert1</td> <td>&nbsp;</td> <td>Wert2</td> <td>&nbsp;&nbsp;</td> <td>Wert3</td>

Wie funktioniert es besser?

[Auge]

Hallo

ich möchte zwischen den spalten einer Tabelle einen kleinen Abstand definieren. Gefunden habe ich nur "border-spacing" und dies im Zusammenhang mit "border-collapse". Allerdings möchte ich keine Raster. Bisher habe ich es so gelöst:

<td>Wert1</td> <td>&nbsp;</td> <td>Wert2</td> <td>&nbsp;&nbsp;</td> <td>Wert3</td>

Wie funktioniert es besser?

Mit border ohne spacing. 😉

Du kannst für jede Seite einer Zeile oder Zelle eine eigene Dicke/Breite des borders definieren und so Platz schaffen, ohne zusätzliche Elemente zu bemühen.

Tschö, Auge

[Werner]

Hallo

Mit border ohne spacing. 😉

Du kannst für jede Seite einer Zeile oder Zelle eine eigene Dicke/Breite des borders definieren und so Platz schaffen, ohne zusätzliche Elemente zu bemühen.

Wenn ich recht verstanden habe, dann mit border-width.
Ich muss aber doch auch Borderlinie unsichtbar machen.
Also habe ich es vergeblich versucht mit

  border-style: none;
  border-width: 50px;

[Rolf B]

Hallo Werner,

nimm beispielsweise border-right: 50px solid transparent;

Bei border-style:none; gibt's keinen Rand.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Bei border-style:none; gibt's keinen Rand.

Das ist richtig.

nimm beispielsweise border-right: 50px solid transparent;

Das eher nicht.

Jolan tru

[Auge]

Hallo

Mal abgesehen von dem, was die anderen dazu sagen …

Mit border ohne spacing. 😉

Also habe ich es vergeblich versucht mit

  border-style: none;
  border-width: 50px;

Wenn das solch ein transparenter Klopper (50 Pixel breit) werden soll, würde ich, wie Gunnar, die Finger davon lassen. Abgesehen von den Hacks, eine transparente Border zu erzeugen, sträubt es sich dabei in mir. Mit Padding für die betreffenden Zellen, die im Übrigen schon von sich aus transparent sind, bist da da wohl IMHO besser bedient.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Du kannst für jede Seite einer Zeile oder Zelle eine eigene Dicke/Breite des borders definieren und so Platz schaffen, ohne zusätzliche Elemente zu bemühen.

Der Gebrauch (meine böse Zunge sagt: Missbrauch) von border für Abstände geht aber auch nur, wenn man nicht Rahmen für die Zellen haben möchte.

Ich würde für Abstände ja die Eigenschaft nehmen, die für Abstände vorgesehen ist: padding. Geht dann auch mit Rahmen: table with cell borders.

Wenn man nur zwischen den Zellen Linien haben möchte, aber außenrum keinen Rahmen, nimmt man den halt weg: table with cell borders 2. Wie man an dem Beispiel sieht, müsste man da noch mehr Gehirnschmalz reinstecken, wenn man verbundene Zellen hat.

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn man nur zwischen den Zellen Linien haben möchte, aber außenrum keinen Rahmen, nimmt man den halt weg: table with cell borders 2. Wie man an dem Beispiel sieht, müsste man da noch mehr Gehirnschmalz reinstecken, wenn man verbundene Zellen hat.

Man könnte Zeilen, die nicht alle Zellen enthalten, mit einer Klasse kennzeichen: table with cell borders 2.1.

Oder man kann davon ausgehen, dass man am links immer Zeilenköpfe (d.h. th-Elemente) hat. Dann wird’s auch einfach: table with cell borders 2.2.

Jolan tru

[MrMurphy]

Erst mal solltest du erklären, was du unter einer "Responsiven Tabelle" verstehst. Dafür gibt es mehrere Möglichkeiten.

Aktuell verstehe ich dich so, das die Zeilen einer Tabelle nicht durch Linien unterbrochen werden sollen. Also zum Beispiel weder ein Rand sichtbar sein soll noch der Hintergrund durchscheinen soll.

Dann würde ich größere Abstände durch CSS-padding erzeugen. Für die Werte von padding gibt es verschiedene Kurzschreibweisen. Es können bis zu 4 Werte angegeben werden, wobei wiederum mehrere Einheiten zulässig sind.

Ich habe mal ein Beispiel mit 2 Werten (10px 20px) erstellt, wobei die 10px sich auf oben und unten, die 20px sich auf links und rechts auswirken.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Tabelle Zellenabstand</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      table {
         border-collapse: collapse;
      }
      th,
      td {
         padding: 10px 20px;
         text-align: left;
      }
      th {
         background-color: #eee;
      }
      td {
         border-bottom: 1px solid #ddd;
      }
      tr:nth-child(even) td {
         background-color: #f2f2f2;
      }
   </style>
</head>
<body>
   <main>
      <h1>Tabellen - Zellenabstand</h1>
      <table>
         <thead>
            <tr>
               <th>Name</th>
               <th>Alter</th>
               <th>Stadt</th>
               <th>Land</th>
               <th>Telefonnummer</th>
               <th>Email</th>
               <th>Webseite</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Max Mustermann</td>
               <td>28</td>
               <td>Berlin</td>
               <td>Deutschland</td>
               <td>030 1234567</td>
               <td>[e-mail]</td>
               <td>www.maxmustermann.de</td>
            </tr>
            <tr>
               <td>Maria Musterfrau</td>
               <td>32</td>
               <td>Hamburg</td>
               <td>Deutschland</td>
               <td>040 1234567</td>
               <td>[e-mail]</td>
               <td>www.mariamusterfrau.de</td>
            </tr>
            <tr>
               <td>Werner Wunder</td>
               <td>44</td>
               <td>München</td>
               <td>Deutschland</td>
               <td>01522 873873</td>
               <td>[e-mail]</td>
               <td>-</td>
            </tr>
            <tr>
               <td>Auge Aster</td>
               <td>27</td>
               <td>Wien</td>
               <td>Österreich</td>
               <td>01818 23452345</td>
               <td>[e-mail]</td>
               <td>www.asterauge.de</td>
            </tr>
         </tbody>
      </table>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/mar/24/spaltenabstand-in-responsive-tabellen/1819291#m1819291">https://forum.selfhtml.org/</a></p>
   </footer>
</body>
</html>

[Gunnar Bittersmann]

@@MrMurphy

wobei wiederum mehrere Einheiten zulässig sind.

Ja, und die sind unterschiedlich gut geeignet.

Ich habe mal ein Beispiel mit 2 Werten (10px 20px) erstellt

px ist schlecht geeignet. Wenn ein Nutzer für sich eine größere Schrift eingestellt hat, sollten die Abstände auch größer sein.

Das heißt: Sie sollten relativ zur Schriftgröße angeben werden, also in einer Einheit wie em oder ch bzw. rem.

Jolan tru

PS: Ich hab wenig Lust, jedesmal deine Postings zu editieren, um das Syntax-Highlighting einzuschalten. Machst du das bitte selber?

[MrMurphy]

https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1819006#m1819006

[Auge]

Hallo

auch wenn das beim ersten Mal gewöhnungsbedürftig erscheint, würde ich die Verwendung logischer statt der physischen Eigenschaften vorschlagen.

Statt …

      th,
      td {
         padding: 10px 20px;
         text-align: left;
      }

… wäre das in diesem Szenario …

      th,
      td {
         padding-block: 10px;
         padding-inline: 20px;
         text-align: start;
      }

Bedingung dafür (zumindest für text-align: start) ist die Angabe der Schreibrichtung als Attribut des Elements html.

<html lang="de" dir="ltr">
<!-- oder zum Beispiel -->
<html lang="ar" dir="rtl">

Selbst ohne Fremd- oder Mehrsprachigkeit der Website, für die die logischen Eigenschaften das Handling des Layouts enorm verbessern, sind sie ein Vorteil, zum Beispiel für Effekte wie um 90° gedrehte Elemente. Mit den logischen Eigenschaften wandern die definierten Werte bei der Drehung einfach mit.

Tschö, Auge

[Werner]

Hallo,

jetzt sehe ich vor lauter Bäumen (Vorschlägen) den Wald (die beste Lösung) nicht mehr.

Da ich noch nicht erfahren bin, habe ich als Beispiel von MrMurphy als Grundlage gemommen und stark verkürzt.

Mein Beispiel:

<!DOCTYPE html>
<html>
<head>
<style>
table.testtab {
  border-collapse: collapse;
}
table.testtab th,td {
  padding: 5px 10px;
  text-align: left;
}
table.testtab td {
         border-bottom: 2px solid red;
}

</style>
</head>
<body>

<h2>Test</h2>
<table class="testtab">
  <thead>
    <tr>
      <th>aaaa</th>
      <th>bbbbbb</th>
      <th>cc</th>
      <th>ddddddd</th>
    </tr> 
  </thead>
  <tbody> 
    <tr>
      <td>w111</td>
      <td>w22222</td>
      <td>w3</td>
      <td>w4444444</td>
    </tr>
    <tr>
      <td>u111111</td>
      <td>v22222</td>
      <td>w33</td>
      <td>x4444444</td>
    </tr>
   </tbody>
</table>
<br><hr><br>
<table>
  <thead>
    <tr>
      <th>aaaa</th>
      <th>bbbbbb</th>
      <th>cc</th>
      <th>ddddddd</th>
    </tr> 
  </thead>
  <tbody> 
    <tr>
      <td>w111</td>
      <td>w22222</td>
      <td>w3</td>
      <td>w4444444</td>
    </tr>
    <tr>
      <td>u111111</td>
      <td>v22222</td>
      <td>w33</td>
      <td>x4444444</td>
    </tr>
   </tbody>
</table></body>
</html>

Ergebnis:

Die border-Angabe wirkt wie erwartet für die Tabelle mit class-Angabe, die padding-Angabe wirkt aber auch bei der anderen Tabelle, warum?

[MudGuard]

Hi,

table.testtab th,td {

Die border-Angabe wirkt wie erwartet für die Tabelle mit class-Angabe, die padding-Angabe wirkt aber auch bei der anderen Tabelle, warum?

td, table.testtab th wäre äquivalent.

Deine Erwartung, daß das äquivalent zu

table.testtab td, table.testtab th

wäre, ist falsch.

cu,
Andreas a/k/a MudGuard

[MrMurphy]

Die CSS-Schreibweise ist teilweise falsch. Ersetze

   table.testtab th, td {
      padding: 5px 50px;
      text-align: left;
   }

durch

   table.testtab th,
   table.testtab td {
      padding: 5px 50px;
      text-align: left;
   }

[Gunnar Bittersmann]

@@MrMurphy

   table.testtab th,
   table.testtab td {
      padding: 5px 50px;
      text-align: left;
   }

Das ist WET^[1], nicht DRY^[2]. table.testtab sollte nicht wiederholt werden.

Jolan tru

---

1. write everything twice ↩︎

2. don’t repeat yourself ↩︎

[ottogal]

Hallo Gunnar,

die laute Rotmarkierung für falsch finde ich hier unangebracht, denn es liegt ja kein Regelverstoß vor.

Der Fragesteller hat sich als Anfänger zu erkennen gegeben. Für ihn dürfte deine weiter unten gegebene Alternative mit den funktionalen Pseudoklassen :is() bzw. :where() und dem Spezifizitätsproblem eher abschreckend als ermutigend sein. Das können wir doch nicht wollen.

Das DRY-Prinzip "sollte" man sicher beherzigen - in einem solch trivialen Fall nicht.

Beste Grüße
ottogal

[Gunnar Bittersmann]

@@ottogal

Der Fragesteller hat sich als Anfänger zu erkennen gegeben. Für ihn dürfte deine weiter unten gegebene Alternative mit den funktionalen Pseudoklassen :is() bzw. :where() und dem Spezifizitätsproblem eher abschreckend als ermutigend sein.

Nö, wieso denn? Er probiert eins davon: funktioniert. Wenn er Lust hat, probiert er noch das andere: funktioniert auch. Damit dürfte er zufrieden sein.

Ausgehend von table.testtab th, td ist es auch einfach zu verstehen:
Ah, um th, td muss eine Klammer! Bitteschön: table.testtab :is(th, td).

Jolan tru

[ottogal]

Nö, wieso denn? Er probiert eins davon: funktioniert. Wenn er Lust hat, probiert er noch das andere: funktioniert auch. Damit dürfte er zufrieden sein.

Ausgehend von table.testtab th, td ist es auch einfach zu verstehen:
Ah, um th, td muss eine Klammer! Bitteschön: table.testtab :is(th, td).

Das ist doch kein Verstehen, einfach was abzukupfern.

Er fängt grade an! Das hier kann er viel einfacher verstehen:

   table.testtab th, td {
      padding: 5px 50px;
      text-align: left;
   }

   table.testtab th,
   table.testtab td {
      padding: 5px 50px;
      text-align: left;
   }

[Gunnar Bittersmann]

@@ottogal

Er fängt grade an! Das hier kann er viel einfacher verstehen:
table.testtab th, table.testtab td

Das weißt du woher? Hast du mit Neulingen gesprochen?

Oder gehst du davon aus, weil du das besser verstehst (weil du an die Schreibweise gewöhnt bist), verstehen es auch Neulinge besser?

Neulinge sind aber weder an die eine noch an die andere Schreibweise gewöhnt. Ich behaupte mal das Gegenteil: Für Neulinge ist table.testtab :is(th, td) einfacher zu verstehen.

(Ich fühle mich gerade an die Diskussion zu Grid erinnert.)

Möglicherweise haben wir beide Unrecht und die eine präferiert dieses, der andere jenes. Der Punkt ist: aus der Ich-bin-das-so-gewöhnt-Sicht kann man das schlecht beurteilen.

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

   table.testtab th,
   table.testtab td {
      padding: 5px 50px;
      text-align: left;
   }

Das ist WET[^WET], nicht DRY[^DRY]. table.testtab sollte nicht wiederholt werden.

Was man statt mit :is()/:where() auch so haben kann:

table.testtab {
  th, td {
    padding: 5px 50px;
    text-align: left;
  }
}

Jolan tru

[Gunnar Bittersmann]

@@Werner

Mein Beispiel:

Es ist i.A. nicht sinnvoll, einfach den Code hier abzuladen. Soll sich jeder potentielle Helfer daraus erst ein funktionierendes Beispiel erstellen? Das wäre deine Aufgabe. Verlinke deine Testseite; entweder auf deinem Webspace oder auf CodePen, Dabblet o.ä.

Die border-Angabe wirkt wie erwartet für die Tabelle mit class-Angabe, die padding-Angabe wirkt aber auch bei der anderen Tabelle, warum?

Weil du das so angegeben hast:

table.testtab th,td {
  padding: 5px 10px;
  text-align: left;
}

Was dasselbe ist wie

table.testtab th {
  padding: 5px 10px;
  text-align: left;
}

td {
  padding: 5px 10px;
  text-align: left;
}

Was du eigentlich wolltest:

table.testtab :is(th, td) {
  padding: 5px 10px;
  text-align: left;
}

(oder mit geringerer Spezifität table.testtab :where(th, td) {…})

Vielleicht hättest du dir doch besser mein Beispiel ansehen sollen? 😉

Und was du noch wolltest: padding nicht in px angeben.

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Genau den Fall <Vorfahre> th, td { … } bin ich in TIL :where the fun :is durchgegangen.

Im weiteren Verlauf dann auch der Unterschied zwischen :is() und :when() :where().

Jolan tru

[MudGuard]

Hi,

Im weiteren Verlauf dann auch der Unterschied zwischen :is() und :when().

:when not found. Dort wird :is und :where erwähnt.

Danke für den Hinweis, ich kannte beides noch nicht.

Aber aus der verlinkten Galerie wird der Unterschied nicht wirklich deutlich.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

:when not found.

Ups. Bei den großen Ws kann man schon mal durcheinander kommen. ☺️

Aber aus der verlinkten Galerie wird der Unterschied nicht wirklich deutlich.

:is() hat die Spezifität des höchsten darin aufgelisteten Selektors. Deshalb überschreibt in diesem Beispiel die letzte Regel nicht die vorletzte; die Tür bleibt rot.

:where() hat die Spezifität 0. Die Tür wird in jenem Beispiel schwarz angemalt, selbst wenn man die Reihenfolge der Regeln vertauscht.

Würde man im Beispiel auf Folie 14 :is() statt :where() verwenden, würden die nachfolgen Angaben im @media-Block nicht auf details p innerhalb von #tas und #pro angewendet werden.

Jolan tru

[Rolf B]

Hallo Gunnar Bittersmann,

:is() hat die Spezifität des höchsten darin aufgelisteten Selektors.

Man kann es wohl nicht genug wiederholen: Bei dieser Spezifität kommt es nicht darauf an, welcher der Selektoren im :is() verwendet wird. Die :is()-Spezifität ist statisch.

Gegeben sei dieses HTML

<style>
p.xx { color: green; }
</style>

...

<p class="xx" id="foo">FOO</p>
<p class="xx">FOO</p>

Mit #foo, p { color: red; } im Stylesheet wird nur das erste p Element rot.

Mit :is(#bar, p) { color: red; } werden beide p Elemente rot, obwohl weit und breit kein Element mit id="bar" zu sehen ist und p.xx eine höhere Spezifität (0-1-1) hat als p (0-0-1). Wegen #bar hat :is() die Spezifität 1-0-0 und gewinnt.

Der Vollständigkeit halber: mit :where(#bar, p) { color: red; } bleibt alles grün.

Rolf

[Gunnar Bittersmann]

@@Rolf B

:is() hat die Spezifität des höchsten darin aufgelisteten Selektors.

Man kann es wohl nicht genug wiederholen: Bei dieser Spezifität kommt es nicht darauf an, welcher der Selektoren im :is() verwendet wird. Die :is()-Spezifität ist statisch.

Genau so wollte ich verstanden worden sein.

Jolan tru

[Werner]

Hallo,
die Vorschläge von Gunnar werde ich in Zukunft nicht mehr lesen. Er hat für mich eine sinnlose, unverständliche Diskussion entfacht.

Ich hatte eine einfache Lösung erwartet.

Ich habe es - für mich übersichtlichste Lösung - so realisiert

table.testtab th {
      padding: 5px 50px;
      text-align: left;
   }

table.testtab td {
      padding: 5px 50px;
      text-align: left;
   }

Gunnar wird möglicherweise argumentieren, dass die Datei größer wird und dass die Laufzeit um 0.0000000006% länger wird

[Gunnar Bittersmann]

@@Werner

die Vorschläge von Gunnar werde ich in Zukunft nicht mehr lesen. Er hat für mich eine sinnlose, unverständliche Diskussion entfacht.

Dazu nur soviel: Ein von dir eröffneter Thread gehört dir nicht. Wenn andere darin etwas diskutieren, was über dein Problem hinausgeht, dann ist das so.

Ich hatte eine einfache Lösung erwartet.

Die hast du von mir bekommen.

Ich habe es - für mich übersichtlichste Lösung - so realisiert

table.testtab th {
      padding: 5px 50px;
      text-align: left;
   }

table.testtab td {
      padding: 5px 50px;
      text-align: left;
   }

Gunnar wird möglicherweise argumentieren, dass die Datei größer wird und dass die Laufzeit um 0.0000000006% länger wird

Ich werde argumentieren, dass wenn du den Wert von 50px auf 40px ändern willst, das an zwei Stellen tun musst. Das ist nie gut. Nicht nur, dass es mehr Aufwand macht – man vergisst dabei schnell mal eine Stelle.

Jolan tru