html - 如何制作一个表的第一行比其他行更多的列？

Question

我正在尝试用 HTML 构建一个简单的表格，但遇到了一个我无法解决的问题。我的表目前看起来像这样:

如何让它看起来像这样？

第二行的单元格从顶部单元格的一半开始。

Answer 1

你可以试试 flexbox:

https://jsfiddle.net/87swa6mm/1/

<style>
.box {
   background-color: #eee;
   padding: 10px;
   margin: 10px;
}
.flex-c {
  display: flex;
  justify-content: center;
}
</style>


<div class="flex-c">
<div class="box">foo</div>
<div class="box">foo</div>
<div class="box">foo</div>
<div class="box">foo</div>
</div>

<div class="flex-c">
<div class="box">foo</div>
<div class="box">foo</div>
<div class="box">foo</div>
</div>

<div class="flex-c">
<div class="box">foo</div>
<div class="box">foo</div>
<div class="box">foo</div>
</div>