tabla html Fuerza en una sola columna apilada utilizando sólo CSS y JavaScript sin

estoy creando una plantilla HTML que envuelve una tabla que se utiliza para diseñar un formulario. Tengo control total sobre el html que envuelve la tabla, no la tabla en sí. La tabla se inyecta en mi plantilla antes de enviarla al cliente. No tengo control sobre esto en absoluto. Lo único que tengo control es el html que envuelve la tabla y cualquier css.tabla html Fuerza en una sola columna apilada utilizando sólo CSS y JavaScript sin

La tabla es una tabla de dos columnas que se ve así:

<table> 
    <tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    </tr> 
    <tr> 
    <td>this is column 1</td> 
    <td>this is column 2</td> 
    </tr> 
</table> 

------------------------------------------------- 
|Column 1     |Column 2   | 
------------------------------------------------- 
|this is column 1   |this is column 2 | 
-------------------------------------------------

Sin embargo yo preferiría si podíamos mostrar como uno de columnas apiladas.

---------------------------- 
|Column 1     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
|Column 2     | 
----------------------------- 
| this is column 2   | 
-----------------------------

Hay una manera de lograr esto usando solo css, no javascript.

Fuente

2012-09-10 KJF

¿Tiene algún código que haya probado antes? – Kyle

Envuélvalo en un div en lugar de en una tabla si puede cambiar el ajuste html, mucho más simple y sólido que usar una tabla para esto. – easwee

@KJF como easwee sugiere usar div será mejor que la tabla. – freebird

No, esto no es razonablemente posible sin cambiar el marcado. Tablas en HTML se estructuran como filas, columnas no como . En el ejemplo que le das que estés re-ordenar el contenido:

orden original:
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

Nueva Orden:
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

¿Por qué yo "no dicen razonablemente posible "? Bueno, con el posicionamiento absoluto y las técnicas similares, es posible que puedas hackear el diseño que deseas en conjunto, pero hay un mundo de CSS dañado, ya que no espero que ese enfoque sea agradable en una página real.

Nota adicional: Para añadir al problema "reordenación", algo que puede ser un poco más fácil de lograr sería este diseño, donde el orden se mantiene igual:

---------------------------- 
|Column 1     | 
----------------------------- 
|Column 2     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
| this is column 2   | 
-----------------------------

Pero eso obviamente no es lo que quieres.

Fuente

2012-09-10 09:13:43 Jeroen

Trate de añadir esto a usted CSS:

td { 
    display: table-row; 
}

Saludos.

Fuente

2012-09-10 09:23:47 George

Si bien esta es una solución limpia, IE no podrá mostrarla. – easwee

Nod. No funcionará, es decir, 7 o menos. :) – George

Nop - no funciona en ningún IE - incluso 9. – easwee

Simply; No. No puede convertir una fila en una tabla de 2 columnas en una tabla de 1 columna sin JavaScript.
O dicen los codificadores de la tabla para crear la tabla de esa manera, o simplemente utilizar JavaScript para reestructurar la tabla.

Fuente

2012-09-10 09:32:31

Sin mencionar la mala codificación de todos modos si usaban una tabla. – easwee

Se puede lograr algo similar mediante el uso de display:block;.

ver este violín: http://jsfiddle.net/R53KH/

Fuente

2012-09-10 09:43:52 starbeamrainbowlabs

única solución que se me ocurre es decir, el cambio de su margen de beneficio. Lo cambiaría de tal manera que tome una columna y la escriba como una fila en el marcado.Aquí hay un violín que he creado: http://jsfiddle.net/MHsxU/

Fuente

2012-09-10 09:44:28

¿Todavía tiene problemas y en Chrome?

Para aquellos que todavía tienen problemas (como yo) compruebe que tiene <!DOCTYPE html> en la parte superior de su documento. Si no lo hace, Chrome parece ignorar por completo todo lo que agregue y mantener display: table-cell.

Fuente

2016-02-11 17:17:38 timtom

Me enfrenté a un problema similar recientemente & parece haber encontrado una buena solución. Las tablas tienen una mala reputación debido al frecuente uso incorrecto, pero en realidad son la opción más sencilla cuando se necesita mostrar una cuadrícula de datos en una ventana de ancho variable.

La respuesta a la pregunta original sigue siendo no. Para resolver este problema sin JavaScript, uno debe ser capaz de editar el marcado de la tabla.

Las tablas pueden verse ... bien ... cuando se estiran de par en par, pero se ven terribles cuando se aplastan. Las tablas "Responsive" son posibles solo agregando marcas contextuales a cada celda (por ejemplo, span.label & span.data elementos). Podemos ocultar fácilmente esta nueva salida superflua por defecto & solo mostrarla cuando se encuentre en un estado de vista receptiva.

table.responsive td .label { 
 
    display: none; 
 
}

<table class="responsive"> 
 
    <thead> 
 
     <tr> 
 
      <th>Column Foo</th> 
 
      <th>Column Bar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td><span class="label">Column Foo</span><span class="data">Baz</span></td> 
 
      <td><span class="label">Column Bar</span><span class="data">Qux</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Cuando en un estado de vista sensible, oculte el elemento & thead mostrar los elementos .label.

table.responsive { 
 
    width: 100%; 
 
} 
 
table.responsive td .label { 
 
    display: none; 
 
} 
 

 
table.responsive th { 
 
    background-color: #ddd; 
 
} 
 

 
table.second { 
 
    margin-top: 5em; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
    table.responsive thead { 
 
    display: none; 
 
    } 
 
    table.responsive tbody th, 
 
    table.responsive tbody td { 
 
    display: block; 
 
    } 
 

 
    table.responsive td span { 
 
    display: block; 
 
    } 
 
    table.responsive td .label { 
 
    background-color: #ddd; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
}

He creado un repo que cubre la solución con mayor detalle. Haga clic en here para ver cómo funciona.

Fuente

2016-08-27 06:13:35 yesnoio

tabla html Fuerza en una sola columna apilada utilizando sólo CSS y JavaScript sin

Respuesta

Cuestiones relacionadas