¿Se pueden reorganizar las celdas de la tabla HTML con CSS?

Me pregunto si es posible reorganizar las celdas de la tabla HTML usando solo CSS.¿Se pueden reorganizar las celdas de la tabla HTML con CSS?

Por ejemplo puede esta

------------------------------------------------ 
|    A   | B | C | 
------------------------------------------------

se mostrará como:

------------------------------------------------ 
| C |    A   | B | 
------------------------------------------------

o tal vez incluso esta:

------------------------- 
|   A   | 
------------------------- 
|  B  |  C  | 
-------------------------

Es esto posible sólo con CSS o es necesario modificar los nodos HTML?

EDIT: Algunos de ustedes se preguntaban por qué esto es necesario en absoluto, así que aquí está el problema de la vida real que se me presentan:

quiero mostrar una lista de los problemas reportados por los usuarios:

------------------------------------------------------------------------------ 
| Problem description (A) | Reporting user (B) | Link to affected entity (C) | 
------------------------------------------------------------------------------

Quería evaluar varios diseños. La primera variante de diseño enfatizaría al usuario informante, la segunda destacaría la descripción del texto.

No tengo ningún problema para cambiar la estructura, y de hecho ya lo hice, pero como estaba codificando esto, me preguntaba si es posible hacerlo con CSS. (Sólo curiosidad pura)

Fuente

2011-09-10 Daniel Rikowski

¿Es aceptable algo que solo funciona en los navegadores modernos? – thirtydot

¿Se refiere específicamente a las celdas de la tabla, como al usar los elementos '

', o está hablando de un diseño similar a una tabla sin tablas? Lo que estás pidiendo no es muy difícil en un diseño sin mesa. – Wex

¿Por qué estás haciendo esto con CSS?Si desea cambiar el significado/estructura de la tabla, cambie el HTML. – BoltClock

Respuesta

Puedes, pero no es lo mejor que puedes hacer (ver otras respuestas).
Aquí está mi ejemplo:

*{margin:0; padding:0} 
 
.type-a .b {width: 50%; float:left;} 
 
.type-a .a {width:100%; float:left;} 
 
.type-a .c {width: 50%; float:left;} 
 

 
.type-b .b {width: 25%; float:left;} 
 
.type-b .a {width: 50%; float:right;} 
 
.type-b .c {width: 25%; float:left;}

<table class="type-a" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
<br /> 
 
<table class="type-b" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table>

View on JSFiddle

Fuente

2011-09-10 17:07:42

Técnicamente cuando defines 'float: left | right; 'para los elementos que son' display: table-cell' los está eliminando por completo de la gestión del diseño de tabla. Por ejemplo, si desea que las celdas de la fila sean de la misma altura, su enfoque no funcionará. Ver: http://jsfiddle.net/ye8Qa/1/ –

@ c-smile, 100% correcto. Dije que esto no es lo mejor que puedo hacer y tu comentario es otra razón por la cual. La pregunta tampoco indicaba que tenía que cumplir con la administración del diseño de la tabla, aunque probablemente estaba implícito;) –

No existe ninguna característica de momento en CSS.

CSS3 ofrecerá flexbox model de una forma u otra (el trabajo está en desarrollo activo en este momento en W3C). Debería permitirte hacer lo que quieras.

Fuente

2011-09-10 17:06:58

que puede hacerlo de una manera sucia, siempre se puede tratar de utilizar la función de flotación.

pero para el último diseño que ya ha proporcionado como un ejemplo, creo que debería ser capaz de jugar con el ancho (arriba uno debe ser width: 100%; y los otros 2 debería ser 50%)

Fuente

2011-09-10 17:27:47 ahoura

puede hacer las tres cosas, con el marcado adecuado, aunque agregado, y un toque de CSS. http://jsfiddle.net/jalbertbowdenii/xvBhF/

fair warning: no estoy seguro de cuán bien puede manejar la manipulación de datos de tablas como esta, solo quiero decir que no, pero independientemente, si se está haciendo público, entonces probablemente quiera investigar ese. Estoy seguro de que hay una forma con todos los sabores de atributos html que solo vienen en estilo de mesa.

Fuente

2011-09-11 06:32:32 albert

Cuestiones relacionadas