这是我尝试创建伪表,使用< dl>并显示：网格.
实际上,它的工作原理.唯一的问题是,我被迫使用丑陋的方式来定义行.这是完全手动的方式.因此,如果我在表格中有30行,那么为每个行重复dt dd … dd将非常愚蠢.
如何解决这个问题？
(我不想使用真正的表,因为它适用于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);
}
Term 1
Definition of term 1 long long long long
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Definition of term 1
Definition of term 1
Term 2
Definition of term 2
Definition of term 2
Definition of term 2
Term 3
Definition of term 3
Definition of term 3
Definition of term 3
1231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
