如何使 table 的首行列数多于其他列数？

Question

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

我怎样才能让它看起来像这样？

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

Answer 1

两个表...

<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>

Answer 2

我会尝试使用两倍于您希望可见的列数，然后使用 colspan="2":

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

<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>

Answer 3

你可以试试 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>

如何使 table 的首行列数多于其他列数？

How to make a table with more columns in a top row than in others?

html

css

tablelayout