html – 使用定义列表和网格布局创建表

这是我尝试创建伪表,使用< 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 */
}