Antwort an „MrMurphy“ verfassen

SELF-Forum

Klassische Tabelle umwandeln in responsive Darstellung

MrMurphy

Mal ein Beispiel zum Ausprobieren, vielleicht hilft dir das weiter:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Tabelle scrollbar</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>
      .tabscroll {
         overflow-x: scroll;
      }
      .tabscroll table {
         width: 100%;
         border-collapse: collapse;
      }
      .tabscroll th,
      .tabscroll td {
         padding: 8px;
         text-align: left;
      }
      .tabscroll th {
         background-color: #eee;
      }
      .tabscroll td {
         border-bottom: 1px solid #ddd;
      }
      .tabscroll tr:nth-child(even) td {
         background-color: #f2f2f2;
      }
   </style>
</head>
<body>
   <main>
      <h1>Überschrift</h1>
      <p>In der Webentwicklung ist die Darstellung von Tabellendaten eine häufige Anforderung. Manchmal können jedoch Tabellen so breit sein, dass sie den sichtbaren Bereich des Bildschirms überschreiten. In solchen Fällen ist es wichtig, eine Lösung zu finden, um den gesamten Tabelleninhalt darzustellen, ohne dass Informationen abgeschnitten werden. Eine scrollbare Tabelle ist die Lösung für ein responsives Webdesign! In diesem Blogpost werde ich dir zeigen, wie du eine scrollbare Tabelle in deine Webseite einfügst und warum sie so praktisch ist.</p>
      <section class="tabscroll">
         <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>
            </tbody>
         </table>
      </section>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/mar/12/klassische-tabelle-umwandeln-in-responsive-darstellung/1819258#m1819258">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