Colspan en display table

Tengo lo siguiente:

<div class="table">
   <div class="thead">
      <div class="tr">
         <div class="th"></div>
         <!-- hay 9 etiquetas 'th' incluyendo el ya puesto -->
      </div>
   </div>
   <div class="tbody">
      <div class="tr">
         <div class="td"></div>
         <!-- hay 9 etiquetas 'td' incluyendo el ya puesto -->
      </div>
      <div class="tr">
         <!-- aquí solo están estas dos -->
         <div class="td"></div>
         <div class="td"></div>
      </div>
   </div>
</div>

.table{
   display: table;
}
 
.thead {
   display: table-header-group;
}
 
.tbody {
   display: table-row-group;
}
 
.tr {
   display: table-row;
}
 
.th, td {
   display: table-cell;
}

Mi pregunta es, ¿cómo hago para que dentro del .tbody el segundo .tr que tiene solo 2 .td, el primero ocupe 1 columna y el segundo las 8 restantes?

Respuestas

#1

@ucip3 es fácil. tienes que ponerle a la segunda etiqueta:

<td colspan="8"></td>

@cristian_angulo

17 septiembre 2015, 16:02

#2

@cristian_angulo quizás @ucip3 preguntaba cómo hacerlo usando solo CSS, sin cambiar la estructura HTML del contenido. Por lo que tengo entendido, no es posible hacer esto sólo con CSS, así que la única respuesta válida que conozco es la que te ha dado @cristian_angulo.

@javiereguiluz

17 septiembre 2015, 16:07

#3

Gracias, seguiré buscando entonces.

@ucip3

17 septiembre 2015, 16:15