Table 具有不同 colspans 的嵌套行

Question

我正在尝试创建一个具有嵌套行和不同 colspans 的 <table> 元素。这是一个小线框来说明我的意思。我该如何处理？

Answer 1

使用嵌套表格可以很好地完成这项工作：

#wrapper{
border-spacing: 0px;
    border-radius: 10px;
    overflow: hidden;
}
#wrapper th {
  height: 30px;
  background-color: #6D6D6D;
}
#wrapper td{
  vertical-align: top;
  padding:10px;
}

.darkblock{
  background-color:#555555;
  height:20px;
  width:50px;
  border-radius:25px;
}
.greyblock{
  background-color:#BDBDBD;
  height:20px;
  width:50px;
  border-radius:25px;
  margin-top:10px;
}
.long-block{
  width:150px;
  background-color:white;
  height:20px;
  border-radius:25px;
}
#wrapper .row {
  background-color: lightgrey;
}
.inner{
  padding: 0 !important;
}

<table id="wrapper">
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr class="row">
    <td>
       <div class="darkblock"></div>
    </td>
    <td>
    <div class="darkblock"></div>
    <div class="greyblock"></div></td>
    <td class="inner">
      <table>
        <tr>
          <td><div class="darkblock"></div></td>
          <td><div class="darkblock"></div></td>
          <td><div class="darkblock"></div></td>
        </tr>
        <tr>
          <td colspan="3"><div class="long-block"></div></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="row">
    <td>
       <div class="darkblock"></div>
    </td>
    <td>
    <div class="darkblock"></div>
    <div class="greyblock"></div></td>
    <td class="inner">
      <table>
        <tr>
          <td><div class="darkblock"></div></td>
          <td><div class="darkblock"></div></td>
          <td><div class="darkblock"></div></td>
        </tr>
        <tr>
          <td colspan="3"><div class="long-block"></div></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="row">
    <td>
       <div class="darkblock"></div>
    </td>
    <td>
    <div class="darkblock"></div>
    <div class="greyblock"></div></td>
    <td class="inner">
      <table>
        <tr>
          <td><div class="darkblock"></div></td>
          <td><div class="darkblock"></div></td>
          <td><div class="darkblock"></div></td>
        </tr>
        <tr>
          <td colspan="3"><div class="long-block"></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Table 具有不同 colspans 的嵌套行

Table with nested rows with different colspans

html

html-table

nested-table