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 hacer referencia a un archivo .css en una vista de afeitar?Seleccione el cambio de estilo de flechacómo eliminar solo una propiedad de estilo con jquery¿Puedo colocar un elemento fijo en relación con el elemento primario?Cómo alinear elementos en a a la derecha¿Cómo hago que las columnas de la tarjeta se ordenen horizontalmente?cómo hacer que un div se mueva aleatoriamente alrededor de una página (usando jQuery o CSS)Colapso del Margen CSS