MrMurphy: CSS Tab-Size

Beitrag lesen

SELF-Forum

CSS Tab-Size

MrMurphy
– Informationen zu den Bewertungsregeln

Ich würde das folgendermaßen lösen, wobei sich die linke Spalte dem längsten Text anpasst. Da das HTML sehr übersichtlich bleibt kann es leicht gepflegt werden.


<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Tabellendarstellung</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>

   @media all {
      dl {
         padding: 0.5rem;
         border: 2px solid grey;
         border-radius: 0.5rem;
         display: grid;
         grid-template-columns: auto 1fr;
      }
      dt {
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 0rem 0.5rem;
      }
      dd::before {
         content:':';
         margin-right: 0.5rem;
      }
   }
   </style>
</head>
<body>
   <header>
      <h1>Tabellendarstellung</h1>
   </header>
   <main>
      <dl>
         <dt>Italien</dt>
         <dd>Rom</dd>
         <dt>Großbritannien</dt>
         <dd>London</dd>
         <dt>Brunei</dt>
         <dd>Bandar Seri Begawan</dd>
         <dt>Bali</dt>
         <dd>Denpassar</dd>
      </dl>
   </main>
</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln