Html 在UL LI或表格中动态创建自定义网格

我想创建这样的页面列表如何实现这一点

第1单元
第2单元
第三单元
第4单元
第5单元


1.
2.
3.
4.
5.


1.
2.
3.
4.
5.


/*CSS*/
.测试台{
显示：表格；
边际：0px；
填充：0px；
}
testRow先生{
显示：表格行；
}
.testRow>span{
列表样式：无；
显示：表格单元格；
边框：1px实心#000；
填充：2px6px；
}
.testHeader{
显示：表头组；
/*位置：绝对位置*/
}
.testHeader跨度{
背景色：#ccc；
}
.测试体{
显示：表格行组；
}

只要尝试一些东西并发布，如果你有bug，人们可能会帮助你……这并不准确，很简单。我需要使用它3级深。请参阅文章中的链接

    <!--Html-->    
    <ul class="testTable">
            <div class="testHeader">
                <li class="testRow">
                    <span>cell 1</span>
                    <span>cell 2</span>
                    <span>cell 3</span>
                    <span>cell 4</span>
                    <span>cell 5</span>
                </li>
            </div>
            <div class="testBody">
                <li class="testRow">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </li>
                <li class="testRow">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </li>
            </div>
        </ul>


/*CSS*/

.testTable {
  display: table;
  margin: 0px;
  padding: 0px;
}

.testRow {
  display: table-row;
}

.testRow > span {
  list-style:none;
  display: table-cell;
  border: 1px solid #000;
  padding: 2px 6px;
}

.testHeader {
  display: table-header-group;
  /*position: absolute;*/
}

.testHeader span {
  background-color: #ccc;
}

.testBody {
  display: table-row-group;
}