Dividir una tabla por la mitad

¿Hay alguna forma de dividir una tabla por la mitad usando CSS y mostrar las dos partes una al lado de la otra?Dividir una tabla por la mitad

Por ejemplo, tome esto:

| row1 | row1 | row1 | 
| row2 | row2 | row2 | 
| row3 | row3 | row3 | 
| row4 | row4 | row4 | 
| row5 | row5 | row5 |

Y hacer esto:

| row1 | row1 | row1 | | row4 | row4 | row4 | 
| row2 | row2 | row2 | | row5 | row5 | row5 | 
| row3 | row3 | row3 |

que puede cambiar el formato HTML (como marca la "ruptura" fila con una clase personalizada), pero tiene que poder decidir si la tabla se dividirá o no a través de CSS.

Sé que podría usar 2 tablas y usar display:inline-table, pero debo usar solo una tabla porque necesito un ancho de columna consistente (la tabla debe tener diseño automático).

Fuente

2011-06-07 Luiz Borges

Creo que ese tipo de desafía la "definición" de una mesa. Si fuera un elemento fluido, no sería una tabla y, por el contrario, si es una tabla, no es fluido. Aunque es posible que puedas hackear esto con un posicionamiento extraño ... – davin

Pensé mucho, pero como no soy un experto en HTML/CSS, decidí preguntar ... :( –

puede utilizar varias columnas, pero es una propiedad de CSS3. por ejemplo:

-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
column-count: 2; 
column-gap: 20px;

Esto debería funcionar en los navegadores modernos

También puede probar este método

http://www.csscripting.com/css-multi-column/

Fuente

2011-06-07 01:07:42 eagle12

Parece que funciona, pero no en IE, y solo con la variante '-webkit' en Chrome. Esto no será un gran problema ya que usaré Prince XML. Además, noté que la celda podría romperse entre columnas, ¿hay alguna manera de evitar eso? –

Por lo que sé, no hay una forma. – eagle12

funciona como IE 10 con -ms-column-count. En cuanto a la rotura de celda ... eso es difícil e inconsistente, o al menos todavía tengo que encontrar un manera consistente de hacerlo. Puede hacer que una celda individual no se rompa configurando 'display: inline-block', o envolviendo su contenido en un div con ese estilo, pero toda la fila no cooperará de esa manera. Algunos contenidos funcionarán bien , otro contenido será peculiar, frecuentemente con una sangría en la segunda columna. También están los 'c olumn-break' propiedades, pero el soporte es irregular todavía tengo que conseguir que funcionen bien con toda una fila en una tabla. – Randolpho

Respuesta

Cuestiones relacionadas