我怎样才能实现这样的表格？

Question

我尝试使用盒装元素，但它没有以正确的方式出现！ 任何形式的帮助都非常感谢

https://codepen.io/saisree/pen/EXXQGO - 指向codepen的链接

<table>
  <tr>
    <td class="text-center" colspan="4">Aircraft Status  Display</td>
  </tr>
  <tr>
    <td> spare</br>STBY</td><td><div class="vr"></div>


    </td>
  </tr>

<tr>
     <td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;"  class="boxed4 text-center"
    ><span class="br"></span></p>
   </td>
      <td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;"  class="boxed4 text-center"
    ><span class="br"></span></p>
   </td>
      <td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;"  class="boxed4 text-center"
    ><span class="br"></span></p>
   </td>
</table>

Answer 1

使用colspan=n使列的宽度为n列：

<table>
<tr>
<td></td><td colspan="6">this is wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td colspan="6">another wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

Answer 2

从你的形象中你并没有完全清楚你想要达到的目标，但如果你的意思是“半开放式”＃34;细胞，这是一个例子。

它使用col-spans将几个单元格合并为一个和不同的边框设置：首先是所有单元格的默认设置（对于每边的边框），therse被具有特殊CSS选择器的其他CSS规则覆盖（带有伪类）只影响某些单元格：

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  width: 60%;
  margin: 0 auto;
}

td {
  border: 1px solid #333;
  height: 40px;
}
tr:first-of-type > td {
border-bottom: none;
height: 20px;
}
tr:nth-of-type(2) > td {
border-top: none;
height: 40px;
}
tr:nth-of-type(4) > td:not(:first-child) {
border-bottom: none;
}
tr:nth-of-type(5) > td:not(:first-child) {
border-top: none;
}

＆＃13;

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="4" ;></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="4" ;></td>
  </tr>  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;