Here is my attempt to create pseudo-table, using <dl> and display: grid.
Actually, it works. The only problem, is that I forced to use ugly way to define rows. It is completely manual way. So if I have 30 rows in table, it will be really very dumb to repeat dt + dd + ... + dd for each of them.
How this issue could be fixed?
(I don't want to use real tables, because it is for 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>