使用 ul li 将 table 个单元格分组在 html 中？

Question

我想做这样的东西，但没有 html 的 tr 属性，因为我的 table 我只使用 ul 和 li 属性

+-----------------------+
|   one joint column    |
+-----------------------+
|  5  |  6  |   joint   | 
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+

提前致谢

更新

这是我的代码片段：

<li class="cell"> 1min
    <div ng-repeat="load1min in cpu.data1mnList | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load1min.value).toFixed(3)}}
        </span>

    </div>
</li>
<li class="cell"> 5min
    <div ng-repeat="load5min in cpu.data5mnList  | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load5min.value).toFixed(3)}}
        </span>
    </div>

</li>
<li class="cell"> 15min
    <div ng-repeat="load15min in cpu.data15mnList  | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load15min.value).toFixed(3)}}
        </span>
    </div>
</li>

我想将这 3 个单元格分组，并在其上方添加一个标题

Answer 1

使用 CSS 弹性

.flex {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex > * { flex-basis: 100%; }
.span-1 { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }

li { background: gold; }

<ul class="flex">
  <li>one joint column</li>
  <li class="span-1">5</li>
  <li class="span-1">6</li>
  <li class="span-2">joint</li>
  <li class="span-1">9</li>
  <li class="span-1">10</li>
  <li class="span-1">11</li>
  <li class="span-1">12</li>
</ul>

另一种方式：

.flex {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex > * { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }
.span-4 { flex-basis: 100%; }

.flex li { background: gold;}

<ul class="flex">
  <li class="span-4">one joint column</li>
  <li>5</li>
  <li>6</li>
  <li class="span-2">joint</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

使用 ul li 将 table 个单元格分组在 html 中？

Group table cells together in html with ul li?

html

html-lists