htmlhtml-tablenested-table

Table with nested rows with different colspans

I am trying to create a <table> element with nested rows and different colspans. Here is a little wireframe to show what I mean. How do I approach this?

enter image description here

Solution

  • Using nested tables does the job well:

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