¿Alguna vez te has visto en la necesidad de convertir tus div’s en tablas? Usando la propiedad display de CSS, podrás tener las ventajas de las tablas sin perder las flexibilidad de los div’s. Evidentemente estamos perdiendo parte de esa semántica que tanto intetamos conseguir, pero en ocasiones hay que asumir males menores para conseguir resultamos mayores.
//CSS
.table { display: table; }
.table .row { display: table-row; }
.table row .cell { display: table-cell; }
//HTML
<div class="table">
<div class="row header">
<div class="cell">Header Column 1</div>
<div class="cell">Header Column 2</div>
</div>
<div class="row body">
<div class="cell">Body Column 1</div>
<div class="cell">Body Column 2</div>
</div>
</div>
Evidentemente, no puede algo tan fácil, ya que navegadores como IE6 y 7 se pasan esta esta especificación por un lugar poco noble…Entonces, nos toca a nosotros cubrinos las espaldas ante esto.
Solución inline-block
//CSS
.table { }
.table .row { }
.table .row .cell { display: inline-block; }
//HTML
<div class="table">
<div class="row header">
<span class="cell" style='width:50px;'>Header Column 1</span>
<span class="cell" style='width:50px;'>Header Column 2</span>
</div>
<div class="row body">
<span class="cell" style='width:50px;'>Body Column 1</span>
<span class="cell" style='width:50px;'>Body Column 2</span>
</div>
</div>Esta solución, funcionará en la mayoría de navegadores, aunque rompe la regulación de la W3C ya que estamos haciendo que los <span /> sean elementos de bloque.
Solución float
//CSS
.table { }
.table .row { clear: left; }
.table .row .cell{ float: left; }
//HTML
<div class="table">
<div class="row header">
<span class="cell" style='width:50px;'>Header Column 1</span>
<span class="cell" style='width:50px;'>Header Column 2</span>
</div>
<div class="row body">
<span class="cell" style='width:50px;'>Body Column 1</span>
<span class="cell" style='width:50px;'>Body Column 2</span>
</div>
<div style='clear:left;'></div>
</div>Quizas, la solución compatible con los navegadores web, pero … los float, me dan un poco de yu-yu 😀
7 comentarios, 0 referencias
+
#