如何制作一个顶行列比其他列多的表格？答案

【问题标题】：How to make a table with more columns in a top row than in others?如何制作一个顶行列比其他列多的表格？
【发布时间】：2017-01-24 04:08:24
【问题描述】：

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

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

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

【问题讨论】：

标签： html css tablelayout

【解决方案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>

【讨论】：

谢谢，它有效！ :) 你可能知道如何修复两条线粘在一起的“双”厚度吗？你可以在这里看到我在说什么：jsfiddle.net/87swa6mm/2

【解决方案2】：

两张桌子...

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

【讨论】：

【解决方案3】：

我会尝试使用两倍于您希望可见的列，然后使用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>

【讨论】：