Solución:
No existe un análogo CSS simple y elegante para colspan.
Las búsquedas sobre este mismo problema arrojarán una variedad de soluciones que incluyen un conjunto de alternativas, incluido el posicionamiento absoluto, el tamaño, junto con una variedad similar de advertencias específicas del navegador y de las circunstancias. Lea y tome la decisión mejor informada que pueda según lo que encuentre.
No hay colspan en CSS que yo sepa, pero habrá column-span para el diseño de varias columnas en un futuro próximo, pero como es solo un borrador en CSS3, puede verificarlo aquí. De todos modos, puede hacer una solución usando div y span con una pantalla similar a una mesa como esta.
Este sería el HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
Y este sería el css:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
La única razón para usar este truco es obtener el beneficio de table-layout comportamiento, lo uso mucho si solo establecer div y span width en cierto porcentaje no cumplió con nuestro requisito de diseño.
Pero si no necesita beneficiarse del table-layout comportamiento, entonces la respuesta de Durilai sería suficiente para ti.
Otra sugerencia es usar flexbox en lugar de tablas por completo. Esto es una cosa de “navegador moderno”, por supuesto, pero vamos, es 2016;)
Al menos, esta podría ser una solución alternativa para aquellos que buscan una respuesta a esto hoy en día, ya que la publicación original fue de 2010.
Aquí hay una gran guía: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table {
border: 1px solid red;
padding: 2px;
max-width: 300px;
display: flex;
flex-flow: row wrap;
}
.table-cell {
border: 1px solid blue;
flex: 1 30%;
}
.colspan-3 {
border: 1px solid green;
flex: 1 100%;
}<div class="table">
<div class="table-cell">
row 1 - cell 1
</div>
<div class="table-cell">
row 1 - cell 2
</div>
<div class="table-cell">
row 1 - cell 3
</div>
<div class="table-cell colspan-3">
row 2 - cell 1 (spans 3 columns)
</div>
</div>