DOKRY Desarrollo
  1. DOKRY Desarrollo
  3. display: table-cell no funciona en un elemento de entrada

display: table-cell no funciona en un elemento de entrada

Quiero hacer que una parte de un formulario se vea como una hoja de cálculo. Existen varios formularios y, por lo tanto,

no es viable (aunque no estoy en contra de ello cuando lo que hace es imprimir datos semánticamente tabulares, como es el caso).

Así que traté de simplemente usar un diseño CSS2.1 directamente con los elementos de entrada del formulario, por ej.

Ejemplo completo en el violín .

Pero parece una display:table-cell no funciona en elementos .

Si marca Chrome “Estilo Computado”, la pantalla será “elemento en línea”.

Pero no encontré en ninguna parte por qué no debería:

  • Mozilla Dev Network CSS: pantalla
  • W3C CSS 2.1 Recomendación Modelo de formato visual
  • Recomendación de Tablas W3C

¿Alguna idea?

Parecía mucho mejor que tener alguna

alrededor de la y luego tener que jugar con el box-model para que se vea bien …

De W3.org :

“CSS 2.1 no define qué propiedades se aplican a los controles y marcos de formulario, o cómo se puede usar CSS para darles un estilo. Los agentes de usuario pueden aplicar propiedades de CSS a estos elementos. Se recomiendan autores para tratar dicho soporte como experimental. Un nivel futuro de CSS puede especificar esto más “.

Lo sentimos, pero display: table-cell en elementos de input se trata experimentalmente. Intenta evitarlo, utiliza elementos de envoltura para el posicionamiento, por ejemplo.

He hecho un ejemplo con elementos div . Ahora puede tener múltiples formularios dentro de una tabla, sin embargo, solo funciona cuando el elemento del form abarca filas completas. De lo contrario, su anidación se romperá.

EDITAR: actualizó el violín con una versión donde se agrega el border-collapse para evitar bordes dobles.

Ejemplo JSFiddle

Intereting Posts
¿Cómo funcionan los márgenes negativos en CSS y por qué es (margin-top: -5! = Margin-bottom: 5)?Precarga de imágenes CSS¿Es posible cambiar el esquema de Validación de CSS en VS2010?Usar el selector de último hijo¿Cómo centrar verticalmente el contenido con altura variable dentro de un div?¿Cómo se dirige IE7 e IE8 con CSS válido?Fusionando selectores de mixinsCSS: Margen superior cuando el padre no tiene frontera