Mesa sala de juntas

Mostrar marca de verificación en css ✔

Estoy utilizando una tabla como presentación gráfica de unas taquillas que tienen diferentes tamaños. Como resultado, algunas celdas de la tabla abarcan varias filas. Todo estaba bien cuando había algunos modelos estáticos. Ahora tengo que lidiar con configuraciones dinámicas y las tablas son un dolor, así que estoy tratando de convertirlo a CSS.
Esta es la tabla (de ejemplo) que necesito convertir. La posición y el tamaño de las taquillas cambiarán dependiendo del modelo. Si puedo averiguar cómo se vería un modelo usando CSS, puedo trabajarlo para hacerlo dinámico. L, M y S en paréntesis implican el tamaño de las taquillas. Mediana es 2 veces pequeña, grande es 4 veces pequeña y Kiosco es 6 veces el tamaño de la taquilla pequeña.
La imagen de abajo muestra lo que necesito mostrar (una variación). L: taquilla grande, altura 100 px, M: mediana, altura 50 px; S: pequeña, altura 25 px. Sin embargo, no parece que pueda conseguir que las taquillas se muestren en columna aunque especifique flex-dirección: columna.
Este es el CSS y HTML que estoy utilizando. Una vez que añadí la anchura y la altura a la dirección flexible, empezó a mostrar las imágenes en forma de columna. Supongo que esto es un requisito no documentado. Sin embargo, ahora todo se muestra en columna. Esto es lo que tengo:

Mostrar marca de verificación en html ✔ con color verde

Tablas y paginaciónDado que se está utilizando un marcado de tabla basado en estándares para la visualización de datos tabulares, la mayor parte del formateo se renderizará con el aspecto correcto automáticamente con el CSS común. El ejemplo siguiente incluye encabezados de columna en la línea 2-10 envueltos en un bloque thead y utilizando th para la celda de la tabla. Los sub-encabezados de las filas, en este caso la fecha en la línea 13 se crean usando th en el cuerpo de la tabla. Si tiene encabezados de fila en la columna de la izquierda, utilice también th en el cuerpo de la tabla.
PaginaciónEl ejemplo anterior contiene controles de paginación en la parte inferior de la tabla. Utilice la paginación si tiene un gran conjunto de resultados de una búsqueda. No divida los conjuntos de resultados en trozos demasiado pequeños, 50 registros por página es más fácil para el usuario que 10.La paginación anterior muestra que estamos en la primera página y tenemos tres páginas en total.El segundo ejemplo muestra que estamos en la página 6 de un total de 9 o más páginas (no muestre más de tres enlaces de páginas circundantes a cada lado de la actual.
Columnas de la tabla que se pueden ordenarSi su tabla tiene una o más columnas que se pueden ordenar, utilice las siguientes adiciones al marcado en la parte thead de la tabla.Tenga en cuenta que el nombre de la clase para el elemento th en la línea 4 expresa la ordenación actual mientras que los atributos de título en los elementos a expresan cuál será la ordenación después de que el usuario haga clic en el enlace.El nombre de la clase para la ordenación ascendente es sort-asc y para la ordenación descendente sort-desc.

Animación de marca de éxito css

Estoy teniendo dificultades para conseguir que una etiqueta span funcione correctamente dentro de una tabla. Parece como si se ignorara toda la etiqueta span que se define en cualquier lugar entre las etiquetas de la tabla en Firefox, pero en IE se muestra correctamente.
Tal vez se me escapa algo, pero he creado un pequeño archivo CSS y html de ejemplo que se muestra de forma diferente en Firefox y en IE. Espero que alguien pueda decirme por qué se comporta así o cómo puedo reorganizar el html para resolver el problema en Firefox.
Siento decirlo, pero tu HTML es un desastre. La razón por la que IE mostrará el span es probablemente un remanente de las guerras de los navegadores, cuando Netscape y Microsoft luchaban constantemente por quién podía dar sentido al peor HTML. Las únicas etiquetas permitidas dentro de la etiqueta <table> son <legend>, <colgroup>, <tbody>, <tfoot>, <thead> y <tr>. Si quieres que tu <span> sea visible, colócalo en <td> dentro de <tr>.
Otra cosa a tener en cuenta, no hay razón para esos spans (la tabla puede tener una clase) o esas tablas (si sólo estás usando una sola celda, usa un <div> o algo así), un simple <div> probablemente haría todo lo que quieres:

Casilla con marca de verificación en html

Sin embargo, en la práctica esto puede ser “torpe” en algunos lectores de pantalla (leyendo “carácter especial” “nombre de carácter”) y en algunos se ignoran por completo, ya que se supone que son decorativos. Estos suelen ser los lectores de pantalla menos utilizados, JAWS y NVDA se comportan bastante bien.
Una cosa a tener en cuenta en el ejemplo de abajo es que no reemplazo la “marca de verificación” con un texto que diga lo mismo. En su lugar, lo reemplazo con las palabras que tienen más sentido (que en tu ejemplo era “disponible”). Esto proporciona la mejor experiencia posible a los usuarios de lectores de pantalla.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad