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

Question

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

Answer 1

Demo Here

    <!--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;
}