Antwort an „MrMurphy“ verfassen

SELF-Forum

Spaltenabstand in (responsive) Tabellen

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>max-mustermann@example.com</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>maria.musterfrau@example.com</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>wernerwunder@example.com</td>
               <td>-</td>
            </tr>
            <tr>
               <td>Auge Aster</td>
               <td>27</td>
               <td>Wien</td>
               <td>Österreich</td>
               <td>01818 23452345</td>
               <td>aa@gtx.com</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>
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen