Tabelle mit bestimmten Umbrucheigenschaften

pega

Hi

ich habe mit css eine Tabellenstruktur gestaltet mit 3 Spalten wobei die 1. Spalte jeweils die Überschrift für die Zeile trägt. Ich hätte gerne folgendes Verhalten: Wenn die Tabelle nicht mehr in die Bildschirmbreite paßt, sollen die Zellen der Spalten 2 und Spalte 3 jeweils unter unterhalb ihrer Überschrift rutschen aber weiterhin nebeneinander stehen

von

Zeile1 a1 b1

Zeile2 a2 b2

in

Zeile1

a1 b1

Zeile2

a2 b2

HTML

<!DOCTYPE HTML>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        .table {
            display: table;
            overflow-x: auto;
            overflow-y: auto;
        }
        .table-cell {
            display: table-cell;
            padding: 5px;
        }
        .table-cell input {
            width: 120px;
        }
        .table-row {
            display: table-row;
        }
        .table-row-header {
            min-width: 200px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="table-cell table-row-header">Zeile1</div>
            <div class="table-cell"><input type="text" id="a1" value="a1"></div>
            <div class="table-cell"><input type="text" id="b1" value="b1"></div>
        </div>
        <div class="table-row">
            <div class="table-cell table-row-header">Zeile2</div>
            <div class="table-cell"><input type="text" id="a2" value="a2"></div>
            <div class="table-cell"><input type="text" id="b2" value="b2"></div>
        </div>
    </div>
</body></html>

Alles anzeigen

Hat jemand eine Idee was beim css oder in der Struktur geändert werden muss?

MrMurphy

Hallo

Für dein Vorhaben ist CSS-Grid am sinnvollsten.

Ich habe mal ein einfaches Beispiel erstellt:

HTML

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

   /*.tabellenansicht*/
   @media all {
      .tabellenansicht {
         max-width: 700rem;
         border: 2px solid grey;
         border-radius: 0.5rem;
      }
      .tabellenansicht div {
         padding: 0.5rem;
         margin-bottom: 0.5rem;
         display: grid;
         gap: 0.5rem;
      }
      .tabellenansicht div:nth-of-type(1n+2) {
         border-top: 2px solid grey;
      }
      .tabellenansicht dd {
         margin: 0rem;
      }
   }
   @media only screen and (min-width: 600px) {
      .tabellenansicht div {
         grid-template-columns: 1fr 1fr;
      }
      .tabellenansicht div :nth-child(1) {
         grid-column-start: 1;
         grid-column-end: 3;
      }
   }

   </style>
</head>
<body>
   <dl class="tabellenansicht">
      <div>
         <dt>Brasilien</dt>
         <dd>Portugiesisch</dd>
         <dd>Brasilia</dd>
      </div>
      <div>
         <dt>Indonesien</dt>
         <dd>Indonesisch</dd>
         <dd>Jakarta</dd>
      </div>
      <div>
         <dt>Kanada</dt>
         <dd>Englisch, Französisch</dd>
         <dd>Ottawa</dd>
      </div>
   </dl>
</body>
</html>

Alles anzeigen

Die Größen, Abstände, ... kannst du natürlich nach Bedarf anpassen. Bei dem Beispiel geht es erst mal um das grundsätzliche Verhalten.

pega

In deinem Vorschlag stehen die 3 Angaben untereinander. Bei breiten Bildschirmen sollten diese nebeneinander stehen, was zwar mit float:left bei dt und dd gelingt, aber die Breite müßte ich dann allgemeingültig vorgeben, damit ein Tabellencharkter entsteht. Mit meiner Lösung passen sich die Zellbreiten dem breitesten Inhalt an, allerdings mit dem bekannten Umbruchproblem

MrMurphy

Du hast aber schon gelesen:

Zitat

Bei dem Beispiel geht es erst mal um das grundsätzliche Verhalten.

Zitat

was zwar mit float:left

float ist hier sachlich falsch und hilft nicht weiter.

Zitat

In deinem Vorschlag stehen die 3 Angaben untereinander.

Ja klar, bei schmalen Fensterbreiten. Bei größeren Fensterbreiten dann die von dir gewünschte Anordnung. Bei noch größeren Fensterbreiten können dann alle drei Angaben mit CSS-Grid nebeneinander angeordnet werden.

Zitat

Mit meiner Lösung passen

Das wird kaum die Lösung aus deinem ersten Beitrag sein, die enthält schließlich keine breiten Inhalte, die die Breite bestimmen können. Auf Beispiele zu verweisen, die wir nicht kennen, macht keinen Sinn, dazu können wir nämlich nichts schreiben.

Zitat

passen sich die Zellbreiten dem breitesten Inhalt an,

Das geht meiner Kenntnis nach nicht alleine mit HTML und CSS, schon gar nicht bei Input-Elementen. Wenn du eine entsprechende Lösung hast kannst du die gerne zeigen.

Tags