具有不同列跨度的嵌套行的表[关闭]答案

【问题标题】：Table with nested rows with different colspans [closed]具有不同列跨度的嵌套行的表[关闭]
【发布时间】：2021-08-15 21:35:51
【问题描述】：

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

【问题讨论】：

需要动态吗？如果没有，只需对其进行硬编码。
第一步。尝试一些东西，如果遇到问题，再回来。
一开始我也看不到表格数据的情况

标签： html html-table nested-table

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

【讨论】：