如何在顶行中创建一个包含更多列的表？

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>

Answer 2

两张桌子......

＆＃13;

＆＃13;

<table border="1" align="center">
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</tbody>
</table><table border="1" align="center">
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我会尝试使用两倍于您想要的列，然后使用colspan="2"：

＆＃13;

＆＃13;

.border {
  border: 1px solid #000;
}

＆＃13;

<table>
  <tr>
    <td class="border" colspan="2">test</td>
    <td class="border" colspan="2">test</td>
    <td class="border" colspan="2">test</td>
    <td class="border" colspan="2">test</td>
  </tr>
  <tr>
    <td></td>
    <td class="border" colspan="2">test</td>
    <td class="border" colspan="2">test</td>
    <td class="border" colspan="2">test</td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;