一番上の行に他の列より多くの列を持つテーブルを作成するにはどうすればよいですか？

Question

HTMLで単純なテーブルを作成しようとしていますが、解決できない問題が発生しました。私のテーブルには、現在、次のようになります。

は、どのように私はそれがこのように見えることができますか？

2行目のセルはトップセルの半分で開始します。

Answer 1

あなたはフレキシボックスを試みることができる：

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

二つのテーブル...

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

あなたが目に見えるしたいと私はcolspan="2"を使用して、その後、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>