Utwórz tabelę przy użyciu listy definicji i układu siatki

Oto moja próba utworzenia pseudo-tabeli, przy użyciu <dl> i display: grid.Utwórz tabelę przy użyciu listy definicji i układu siatki

Właściwie to działa. Jedynym problemem jest to, że zmuszony jestem do używania brzydkiego sposobu definiowania wierszy. Jest to całkowicie ręczny sposób. Więc jeśli mam 30 wierszy w tabeli, będzie to naprawdę bardzo głupie powtarzanie dt + dd + ... + dd dla każdego z nich.

W jaki sposób można rozwiązać ten problem?

(Nie chcę używać prawdziwych tabel, ponieważ dotyczy Markdown).

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>

Źródło

2017-05-23 jsv

Jeśli jest to stół, dlaczego nie używasz ''

? – Rob

@Rob Ponieważ jest przeznaczony dla Markdown. W ten sposób mógłbym używać tabel wielowierszowych w Markdown. To działa. – jsv

Mam wrażenie, że nie powinieneś używać do tego obniżki. – Rob

Odpowiedz

... Zakładając, że jesteś na Firefox i Chrome, ale nie IE/EDGE: P, tutaj jest roztwór roboczy z dowolnej liczby warunków i dowolną liczbę definicji dla każdego wyrażenia:

➡️ Codepen

Objaśnienia:

wypełniania kolumny siatki po kolumnie ➡️ grid-auto-flow: column;
(elementy siatki) każdy termin powinien być w wierszu 1, więc jego definicje są poniżej to ➡️ dt { grid-row-start: 1 } działa jak następnej kolumnie „proszę”
Tworzenie wystarczająco wyraźnych wierszy (powiedzmy 50), ale wiersz N + 1 powinien pokazywać (mieć dowolną wysokość) tylko wtedy, gdy dany termin ma co najmniej definicję N (4 wiersze są widoczne, jeśli maksymalne definicje dla danego terminu to 3. Brak ma 4) ➡️ grid-template-rows: repeat(50, min-content);
Następnie próbowałem mieć niezdefiniowaną liczbę kolumn/terminów, ale nie mogłem tego osiągnąć za pomocą wyraźnych kolumn (chciałem czegoś takiego jak "1fr, jeśli jest zawartość, ale 0 w przeciwnym razie" z minmax(), min | max-content bez rezultatu). Pracował jak czar z ukrytych kolumn chociaż: ➡️ 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 */ 
 
}

Źródło

2017-05-23 13:11:19 FelipeAls

Dzięki, ciekawe, działa :) Prawdopodobnie zaakceptuję to nieco później, za kilka dni. Obecnie chcę trochę poczekać, aby to pytanie było bardziej widoczne na trackerze. Może ktoś inny ma różne pomysły, jak to naprawić ... To trochę źle, że musimy podać liczbę wierszy ('50'). Ale wciąż jest to duży postęp w stosunku do mojego oryginału. – jsv

Byłbym zaskoczony, gdyby lepsza odpowiedź była możliwa. Poczekajmy, w każdy sposób. – vals

'50' tak naprawdę nie określa liczby; jest bardziej nierealistycznym imho :) Nie chciałem napisać 500 lub 1000 w przypadku, gdyby przeglądarki zaczęłyby używać zbyt dużo pamięci lub cykli procesora lub cokolwiek, o ile nie jest to potrzebne. – FelipeAls

Jeden alternatywne podejście

(cross-browser) jest nadanie Lista definicji rodzicielska względnego pozycjonowania:

dl {position: relative;}

, a następnie nadaj każdemu podelementowi na liście definicji pozycję absolutną.

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

(Naturalnie, ponieważ jesteśmy teraz za pomocą pozycjonowania bezwzględnego, to będzie tylko być realną alternatywą, jeśli masz dobry pomysł, co maksymalna szerokość każdej kolumny danych oraz maksymalną wysokość każdego danych wiersz powinien być).

W tym przypadku będzie trzeba jeszcze dać jednoznacznej left wartość dla każdego dt i dd, ale deklaracja jest identyczna za każdym razem oprócz indeksu (odwołania), który trzykrotnie przyrostów jak tak ...

przykład:

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));}

itp

przykład praca:

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>

Źródło

2017-05-23 15:31:52 Rounin

Wygląda trochę podobnie do mojej alternatywnej wersji, której nie pokazano w oryginalnym wpisie. Tutaj jest, jeśli zastanawiasz się: https://jsfiddle.net/pdqem653/ :) – jsv

Oparte w dużej mierze na odpowiedzi FelipeAls, ale prostsze i bez potrzeby sztucznej liczby wierszy.

Po prostu zmień automatyczny przepływ siatki na wiersz, a rzeczy stają się łatwiejsze.

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>

Źródło

2017-05-24 05:59:19 vals

Dzięki! Tak, jest to prostsze i teraz nie ma potrzeby określania liczby wierszy. To dobra wiadomość! Ale, dla sprawiedliwości, powinienem zauważyć, że ta metoda jest znacznie mniej tolerancyjna dla "błędów" w tabeli, w porównaniu z oryginalną wersją FelipeAls. Oto przykłady: [FelipeAls] (https://jsfiddle.net/chrry7qm/) wersja i [twoja] (https://jsfiddle.net/msuxr4kd/). – jsv

Tak, zgadzam się. (Już skomentowałem to w jego odpowiedzi) Jedynym powodem opublikowania tej odpowiedzi było podanie przykładu bez numeru sztucznego rzędu. Ale wybrałbym jego odpowiedź na kod produkcyjny. – vals

Każda definicja 'dd' jest powiązana z ostatnim' dt'erm znalezionym w znacznikach. Tutaj są wyświetlane od lewej do prawej (wtedy od góry do dołu err Rozmiary rzędów są wypełniane jeden po drugim), dlatego druga definicja pierwszego terminu (B1) jest wyświetlana w kolumnie drugiego terminu, kiedy powinna być wyświetlana w pierwsza kolumna (dlatego dodałem te ABC w mojej odpowiedzi) – FelipeAls

Utwórz tabelę przy użyciu listy definicji i układu siatki

Odpowiedz

Powiązane problemy