Erstellen Sie eine Tabelle mit Definitionsliste und Raster-Layout

Hier ist mein Versuch, Pseudo-Tabelle zu erstellen, mit <dl> und display: grid.Erstellen Sie eine Tabelle mit Definitionsliste und Raster-Layout

Eigentlich funktioniert es. Das einzige Problem ist, dass ich gezwungen bin, hässliche Wege zu benutzen, um Zeilen zu definieren. Es ist komplett manuell. Also, wenn ich 30 Zeilen in der Tabelle habe, wird es wirklich sehr dumm sein, für jedes von ihnen dt + dd + ... + dd zu wiederholen.

Wie könnte dieses Problem behoben werden?

(Ich möchte nicht echte Tabellen verwenden, weil es für Markdown ist).

dl { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
} 
 

 
dt { 
 
    text-align: center; 
 
} 
 

 
dd { 
 
    margin-left: 0; 
 
} 
 

 
dt, dd { 
 
    border: 1px solid lightgray; 
 
    padding: 0 1em; 
 
} 
 

 
/* Ugly part 
 
* (Red, yellow, and green colors are just for demo) 
 
*/ 
 

 
dt { 
 
    grid-row-start: 1; 
 
} 
 

 
dt + dd { 
 
    grid-row-start: 2; 
 
    color: rgb(244, 67, 54); 
 
} 
 

 
dt + dd + dd { 
 
    grid-row-start: 3; 
 
    color: rgb(255, 152, 0); 
 
} 
 

 
dt + dd + dd + dd { 
 
    grid-row-start: 4; 
 
    color: rgb(76, 175, 80); 
 
}

<dl> 
 
    <dt><p>Term 1</p></dt> 
 
    <dd> 
 
     <p>Definition of term 1 long long long long</p> 
 
     <p>Lorem ipsum...</p> 
 
     <p>Lorem ipsum...</p> 
 
     <p>Lorem ipsum...</p> 
 
    </dd> 
 
    <dd><p>Definition of term 1</p></dd> 
 
    <dd><p>Definition of term 1</p></dd> 
 

 
    <dt><p>Term 2</p></dt> 
 
    <dd><p>Definition of term 2</p></dd> 
 
    <dd><p>Definition of term 2</p></dd> 
 
    <dd><p>Definition of term 2</p></dd> 
 

 
    <dt><p>Term 3</p></dt> 
 
    <dd><p>Definition of term 3</p></dd> 
 
    <dd><p>Definition of term 3</p></dd> 
 
    <dd><p>Definition of term 3</p></dd> 
 
</dl>

Quelle

2017-05-23 jsv

Wenn es eine Tabelle ist, warum Sie nicht 'mit

'? – Rob

@Rob Weil es für Markdown ist. Auf diese Weise könnte ich mehrzeilige Tabellen in Markdown verwenden. Es klappt. – jsv

Ich habe das Gefühl, dass Sie Markdown dafür nicht verwenden sollten. – Rob

Antwort

Unter der Annahme, ... Sie sind auf Firefox oder Chrome, aber nicht IE/Kante: p, hier ist eine Arbeitslösung mit einer beliebigen Anzahl von Begriffen und eine beliebige Anzahl von Definitionen für jeden Begriff:

➡️ Codepen

Erläuterungen:

Füllen der Rasterspalte nach Spalte ➡️ grid-auto-flow: column;
(grid items) jeder Term auf Zeile 1 sein sollte, so dass ihre Definitionen sind darunter dt { grid-row-start: 1 } wirkt wie "nächste Spalte please" ➡️
Erstellen genug explizite Zeilen (z. B. 50), aber die Zeile N + 1 sollte nur dann angezeigt werden (irgendeine Höhe haben), wenn ein bestimmter Begriff mindestens N Definitionen hat (4 Zeilen sichtbar, wenn die maximale Definition für einen gegebenen Begriff 3 ist. Keine hat 4) Then grid-template-rows: repeat(50, min-content);
Dann versucht, eine undefinierte Anzahl von Spalten/Terme zu haben, aber ich konnte es nicht mit expliziten Spalten erreichen (ich wollte etwas wie "1fr wenn es Inhalt gibt, aber 0 sonst" mit minmax(), min | max-Inhalt vergeblich). obwohl Arbeitete wie ein Charme mit impliziten Spalten: ➡️ grid-auto-columns: 1fr;

dl { 
 
    display: grid; 
 
    grid-auto-flow: column; 
 
    /* doesn't assume 3 terms but N */ 
 
    grid-auto-columns: 1fr; 
 
    grid-template-rows: repeat(50, min-content); /* doesn't assume 3 defs but M<50 */ 
 
} 
 

 
dt { 
 
    grid-row-start: 1; /* reset, next column */ 
 
}

Quelle

2017-05-23 13:11:19 FelipeAls

Danke, interessant, funktioniert :) Wahrscheinlich werde ich es ein bisschen später akzeptieren, in mehreren Tagen. Momentan möchte ich etwas warten, um diese Frage auf dem Tracker besser sichtbar zu machen. Vielleicht hat jemand anders andere Ideen, wie man es beheben kann ... Es ist ein bisschen schlecht, dass wir die Anzahl der Zeilen angeben müssen ('50'). Aber es ist immer noch eine große Verbesserung gegenüber meinem Original. – jsv

Ich wäre überrascht, wenn eine bessere Antwort möglich wäre. Warten wir, irgendwie. – vals

'50' spezifiziert nicht wirklich eine Nummer; es ist mehr wie ein unrealistisches imho :) Ich wollte 500 oder 1000 nicht schreiben, falls Browser zu viel Speicher oder CPU-Zyklen oder was auch immer verwenden, solange es nicht benötigt wird. – FelipeAls

Eine Alternative (Cross-Browser) Ansatz ist der elterliche Definitionsliste relative Positionierung zu geben:

dl {position: relative;}

und geben Sie dann jedem Unterelement innerhalb der Definitionsliste eine absolute Position.

dt, dd {display: block; position: absolute;}

(natürlich, da wir jetzt die absolute Positionierung verwenden, das wird nur eine brauchbare Alternative sein, wenn Sie eine gute Idee haben, was die maximale Breite jeder Datenspalte und die maximale Höhe der jeweiligen Daten Reihe sollte sein).

In diesem Fall werden Sie noch jeder einen expliziten left Wert für dt und dd haben zu geben, aber die Erklärung ist jedes Mal abgesehen identisch aus dem Index (bezogen dreimal), die wie so erhöht ...

Beispiel:

Index 2: dt:nth-of-type(2), dt:nth-of-type(2) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (2 - 1));} 
Index 3: dt:nth-of-type(3), dt:nth-of-type(3) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (3 - 1));} 
Index 4: dt:nth-of-type(4), dt:nth-of-type(4) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (4 - 1));}

usw.

Arbeitsbeispiel:

dl { 
 
position: relative; 
 
} 
 

 
dt { 
 
text-align: center; 
 
font-weight: bold; 
 
} 
 

 
dt, dd { 
 
display: block; 
 
position: absolute; 
 
width: 200px; 
 
height: 50px; 
 
min-height: 50px; 
 
margin-left: 0; 
 
border: 1px solid lightgray; 
 
padding: 0 1em; 
 
vertical-align: top; 
 
} 
 

 
dt { 
 
top: 0; 
 
} 
 

 
dd:nth-of-type(3n - 2) { 
 
top: 50px; 
 
height: 200px; 
 
color: rgb(244, 67, 54); 
 
} 
 

 
dd:nth-of-type(3n - 1){ 
 
top: 250px; 
 
color: rgb(255, 152, 0); 
 
} 
 

 
dd:nth-of-type(3n) { 
 
top: 300px; 
 
color: rgb(76, 175, 80); 
 
} 
 

 
/* LEFT CO-ORDINATES */ 
 

 
dt:nth-of-type(2), dt:nth-of-type(2) ~ dd { 
 
left: calc((1px + 1em + 200px + 1em + 1px) * (2 - 1)); 
 
} 
 

 
dt:nth-of-type(3), dt:nth-of-type(3) ~ dd { 
 
left: calc((1px + 1em + 200px + 1em + 1px) * (3 - 1)); 
 
}

<dl> 
 
    <dt><p>Term 1</p></dt> 
 
    <dd> 
 
     <p>Definition of term 1 long long long long</p> 
 
     <p>Lorem ipsum...</p> 
 
     <p>Lorem ipsum...</p> 
 
     <p>Lorem ipsum...</p> 
 
    </dd> 
 
    <dd><p>Definition of term 1</p></dd> 
 
    <dd><p>Definition of term 1</p></dd> 
 

 
    <dt><p>Term 2</p></dt> 
 
    <dd><p>Definition of term 2</p></dd> 
 
    <dd><p>Definition of term 2</p></dd> 
 
    <dd><p>Definition of term 2</p></dd> 
 

 
    <dt><p>Term 3</p></dt> 
 
    <dd><p>Definition of term 3</p></dd> 
 
    <dd><p>Definition of term 3</p></dd> 
 
    <dd><p>Definition of term 3</p></dd> 
 
</dl>

Quelle

2017-05-23 15:31:52 Rounin

Sieht ein bisschen ähnlich zu meiner alternativen Version, die nicht im ursprünglichen Post angezeigt wurde. Hier ist es, wenn Sie sich fragen: https://jsfiddle.net/pdqem653/ :) – jsv

Basiert weitgehend auf FelipeAls Antwort, ist aber einfacher und ohne eine künstliche Anzahl von Zeilen zu benötigen.

Ändern Sie einfach Raster-Auto-Flow in Zeile, und die Dinge werden einfacher.

dl { 
 
    display: grid; 
 
    grid-auto-columns: 1fr; 
 
    grid-auto-flow: row; 
 
} 
 

 
dt { 
 
    grid-row: 1; 
 
    background-color: lightgreen; 
 
} 
 

 
dt, dd { 
 
    border: solid 1px silver; 
 
    margin: 0; 
 
}

<dl> 
 
     <dt><p>Term 1</p></dt> 
 
     <dd> 
 
      <p>A Definition of term 1 long long long long Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore impedit cum necessitatibus corporis, ratione culpa nesciunt corrupti recusandae voluptate, sint magni enim ullam quo, ipsum. Voluptatibus quos aliquid, optio!</p> 
 
      <p>Lorem ipsum...</p> 
 
      <p>Lorem ipsum...</p> 
 
      <p>Lorem ipsum...</p> 
 
     </dd> 
 
     <dd><p>B Definition of term 1</p></dd> 
 
     <dd><p>C Definition of term 1</p></dd> 
 
     <dd>May the 4th</dd> 
 

 
     <dt><p>Term 2</p></dt> 
 
     <dd><p>A Definition of term 2</p></dd> 
 
     <dd><p>B Definition of term 2</p></dd> 
 
     <dd><p>C Definition of term 2</p></dd> 
 

 
     <dt><p>Term 3</p></dt> 
 
     <dd><p>A Definition of term 3</p></dd> 
 
     <dd><p>B Definition of term 3</p></dd> 
 
     <dd><p>C Definition of term 3</p></dd> 
 
    </dl>

Quelle

2017-05-24 05:59:19 vals

Vielen Dank! Ja, es ist einfacher und jetzt müssen Sie keine Anzahl von Zeilen angeben. Es ist eine gute Nachricht! Aber für die Gerechtigkeit sollte ich bemerken, dass diese Methode im Vergleich zur ursprünglichen FelipeAls-Version viel weniger tolerant gegenüber irgendwelchen "Fehlern" in der Tabelle ist. Hier sind Beispiele: [FelipeAls] (https://jsfiddle.net/chrry7qm/) Version und [Ihre] (https://jsfiddle.net/msuxr4kd/). – jsv

Ja, ich stimme zu. (Ich habe es bereits in seiner Antwort kommentiert). Der einzige Grund, diese Antwort zu veröffentlichen, war, ein Beispiel ohne die künstliche Zeilennummer anzugeben. Aber ich würde seine Antwort für den Produktionscode wählen. – vals

Jede 'dd'-Definition steht mit dem letzten' dt'erm im Markup in Verbindung. Hier werden sie von links nach rechts angezeigt (dann von oben nach unten, ich meine, Zeilen werden nacheinander gefüllt). Somit wird die zweite Definition des ersten Terms (B1) in der Spalte des zweiten Terms angezeigt, in der sie angezeigt werden soll die 1. Spalte (deshalb habe ich diese ABC in meiner Antwort hinzugefügt) – FelipeAls

Verwandte Themen