¿Es posible alternar filas?

Supongo que este esquema de lo que estoy tratando de hacer será más descriptivo que la pregunta en sí.¿Es posible alternar filas?

+------------------------+-----------------------+ 
|      |      | 
+      +-----------------------+ 
|      |      | 
+------------------------+      + 
|      |      | 
+      +-----------------------+ 
|      |      | 
+------------------------+-----------------------+ 
|      |      | 
+------------------------+-----------------------+

Como se puede ver, estoy tratando de crear una tabla de 2 columnas, donde en algún momento se debe ser capaz de ROWSPAN una de las columnas, y, finalmente, la otra durante los próximos 2 filas.

¿Echo de menos alguna forma obvia de hacerlo, o alguna etiqueta avanzada/atributo? ¿O simplemente no hay forma de hacerlo usando tablas?

Soy consciente de que es posible lograrlo usando otras formas, pero las tablas son lo que me interesa y de lo que se trata.

Como referencia: Hay algunas cosas que he intentado y no tuvo éxito http://jsfiddle.net/dbtYk/

Fuente

2012-06-11 NoBBy

Heh, pregunta interesante, ¡nunca pensé en esto en 12 años de HTML! Creo * que esto es imposible, pero permítanme experimentar un poco ... De cualquier manera, esto puede ser más fácil de hacer con elementos normales de nivel de bloque. –

12 años de HTML? o_O Necesita actualizar su conocimiento. Usando los atributos 'rowspan' y 'colspan' puede crear cualquier tipo de tablas, incluso algunas muy creativas. – micnic

A menos que me he perdido algo, here is an example basado en su jsFiddle

<table> 
    <tr style="height:20px;"> 
     <td rowspan="2">left</td> 
     <td>right</td> 
    </tr> 
    <tr style="height:20px;"> 
     <td rowspan="2">right</td> 
    </tr> 
    <tr style="height:20px;"> 
     <td rowspan="2">left</td> 
    </tr> 
    <tr style="height:20px;"> 
     <td>right</td> 
    </tr> 
    <tr> 
     <td>left</td> 
     <td>right</td> 
    </tr> 
</table>

ACTUALIZACIÓN

Como lo señala Cicada, lo anterior lamentablemente no funciona en Chrome.

ACTUALIZACIÓN 2

Como ha señalado Alohci, añadiendo una altura que hace que funcione en Chrome. Lo anterior se ha modificado para reflejar eso, junto con un new jsfiddle.

Fuente

2012-06-11 11:58:51 freefaller

A menos que me haya perdido algo, su solución no funciona (Chrome 19). –

@Cicada - Estoy empezando a odiar a Chrome de la misma manera que odio IE ... ¿por qué ninguno de estos navegadores funciona de la misma manera? Gracias por señalar el problema – freefaller

Funciona una vez que le da a la tabla filas de altura. – Alohci

Por supuesto que es posible :-)

<table border="yes"> 
    <tr> 
     <td rowspan="2">1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td rowspan="2">3</td> 
    </tr> 
    <tr> 
     <td rowspan="2">4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>6</td> 
     <td>7</td> 
    </tr> 
</table>

omita las células que ya están cubiertos por las células se extendió desde una fila anterior.

Fuente

2012-06-11 12:00:57

Uhm ... -2 ¿para qué? –

Respuesta

Cuestiones relacionadas