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

时间:2017-06-22 18:30:39

标签: html css

Table like this

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

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>

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

从你的形象中你并没有完全清楚你想要达到的目标,但如果你的意思是“半开放式”#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;