Ver Mensaje Individual
  #3 (permalink)  
Antiguo 21/06/2015, 06:21
PHPeros
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 8 meses
Puntos: 578
Respuesta: Como hacer una estructura de tabla solo con css sin <table>?

Una forma de hacerlo es asignar una clase a cada componente de la tabla, darles su comportamiento correspondiente y a las celdas añadirle un poco de padding para que no se queden muy pegadas:

Código HTML:
Ver original
  1. <div class="table">
  2.     <div class="row">
  3.         <div class="cell">Mira</div>
  4.         <div class="cell">lo bonito</div>
  5.     </div>
  6.     <div class="row">
  7.         <div class="cell">que me ha</div>
  8.         <div class="cell">quedado</div>
  9.     </div>
  10. </div>

Código CSS:
Ver original
  1. .table {
  2.     display: table;
  3.     border: 1px solid red;
  4. }
  5.  
  6. .row {
  7.     display: table-row;
  8. }
  9.  
  10. .cell {
  11.     display: table-cell;
  12.     padding-right: 12px;
  13. }

DEMO