Cómo hacer una tabla receptiva - CSS

Tabla receptiva

En el fragmento de código HTML anterior:

• Un "

  "Se ha agregado el encabezado con el texto"Tabla receptiva".

• A ""El elemento contenedor se define con la clase declarada como"mi clase".
• Después de eso, un "Se agrega elemento para crear una tabla en la página web.
  Dentro de "
  "Elemento, cuatro"Se han agregado elementos para hacer cuatro filas de la mesa.
  Dentro de la primera fila, múltiples "

  Se han agregado elementos que definen el contenido del encabezado. Dentro de la segunda, tercera y cuarta fila, la "

  Se han agregado elementos para insertar el contenido en las filas de la tabla. En el elemento de estilo CSS, se requiere definir el "desbordamiento"Propiedad para hacer que la tabla responda. También puede agregar algunas otras propiedades para que la tabla se vea más presentable: .mi clase Overflow-x: auto; mesa espaciado fronterizo: 0; Ancho: 100%; borde: 1px sólido #ddd; th, td text-align: izquierda; relleno: 8px; TR: enésimo hijo (incluso) Color de fondo: #F2F2F2; En el elemento de estilo CSS anterior: El selector de clases ".mi clase"Se ha agregado que se refiere al contenedor Div en el que se ha creado la tabla. Dentro de él, el "desbordamiento"La propiedad se define con el valor"auto". Esto creará una barra de desplazamiento horizontal al final de la mesa. Después de eso, existe el selector de elementos de tabla que tiene las propiedades CSS definidas dentro de él. El "espacio fronterizo"La propiedad define los espacios entre las celdas de la tabla como cero. El "ancho"Propiedad definida como"100%"Expande la tabla de tal manera que cubre toda el área horizontal de la pantalla. El "borde"La propiedad establece el borde de la tabla en"1px" aquí. Después de eso, el "th" y "TD"Los selectores de elementos definen las propiedades para los encabezados de la tabla y las celdas de la tabla. Dentro de él, ahí está el "texto alineado"Propiedad que alinea el contenido al lado izquierdo de la pantalla. El "relleno"La propiedad define la distancia entre el contenido y el borde como"8px". El "color de fondoLa propiedad se agrega con el color de fondo definido en él para la mitad de las filas de la tabla. El código anterior hará una tabla amplia en la salida y la siguiente será la pantalla: Si el tamaño de la pantalla se minimiza de tal manera que se desborda los bordes de la pantalla, habrá una barra de desplazamiento horizontal en la parte inferior debido al uso de "desbordamiento" propiedad: Esto concluye cómo hacer tablas receptivas en HTML. Conclusión Las tablas receptivas en HTML se crean agregando el CSS "desbordamiento"Propiedad para el elemento div en el que se crea la tabla. Esta propiedad simplemente crea una barra de desplazamiento horizontal justo al final de la tabla que hace que la tabla sea horizontalmente desplazable. Esta publicación demostró un método útil para hacer una tabla simple que responda. « ¿Cómo puedo obtener el último nombre de la etiqueta en la rama actual en Git?? Cómo ordenar un diccionario por valor en JavaScript » Java Ejemplos de métodos java Tutorial sobre los métodos de Java, cómo usar los modificadores de acceso para establecer el alcance... Mayte Mesa C ++ Cómo usar referencias de funciones en C ++ Las referencias de funciones, en comparación con las llamadas de funciones convencionales, permiten ... Lorenzo Morales Programación C Cómo implementar un árbol binario en c? Un árbol binario es un tipo de estructura de datos utilizada para representar relaciones jerárquicas... Lorenzo Morales Postgresql PostgreSQL Crear índice simultáneamente José Luis Villagómez Pitón Método estático de Python Call dentro de la clase Pilar Melgar Pitón Python OS Mkdir José Luis Villagómez golang Introducción al lenguaje de programación de Golang Jacobo Piña Base de datos Oracle ¿Qué tipo de base de datos es Oracle Top 10G?? Salvador Anaya Base de datos Oracle Cómo encontrar el nombre del servicio Oracle? Salvador Anaya Estibador Cómo matar un contenedor Docker? Lorenzo Morales AWS ¿Qué es una instancia y cómo usarlo en EC2?? Carolina Guzmán php Por qué se debe utilizar PHP en el desarrollo web Carolina Guzmán Git Cómo forzar el pago de Git? Mayte Mesa