HTML网格目录代码,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);

}