html - 用ul li在html中将表格单元格组合在一起？

Question

我想做这样的事情，但没有 tr 的 html 属性，因为我的表只使用 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 个单元格与它们上方的一个标题分组

标签： htmlhtml-lists

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>