这是我尝试创建伪表,使用< 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);
}最佳答案
假设……你使用的是Firefox或Chrome,而不是IE / Edge：p,这是一个有效的解决方案,每个术语包含任意数量的术语和任意数量的定义：
➡️Codepen
说明：
>填充列后的网格列➡️grid-auto-flow：column;
>(网格项)每个术语应该在第1行,所以它的定义在它下面➡️dt{grid-row-start：1}就像“下一栏请”
>创建足够的显式行(例如,50),但只有当任何给定的术语至少有N个定义时,行N 1才应显示(具有任何高度)(如果给定术语的最大定义为3,则可见4行.无有4个)➡️grid-template-rows：repeat(50,min-content);
>然后尝试使用未定义数量的列/术语但是我无法通过显式列实现它(我希望类似“1fr如果有内容但是0否则”与minmax(),min | max-content无效) .虽然工作就像一个隐含列的魅力：➡️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 */
}