"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo crear tablas HTML verticales con CSS y AngularJS?

¿Cómo crear tablas HTML verticales con CSS y AngularJS?

Publicado el 2024-11-08
Navegar:666

How to Create Vertical HTML Tables with CSS and AngularJS?

Tablas HTML verticales


La creación de tablas HTML con filas verticales ofrece una forma única de mostrar datos, con encabezados de fila ubicados en la lado izquierdo en lugar de la parte superior. Para lograr esto, se puede aplicar estilo CSS para transformar la estructura de la tabla.


Estilo CSS

Para representar las filas de la tabla como columnas verticales, se deben seguir las siguientes reglas CSS se puede utilizar:

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

Esto hará que las celdas de la tabla fluyan verticalmente, con los encabezados correspondientes apareciendo a la izquierda de cada fila.


Integración de AngularJS

Se puede mantener el acceso a las filas de la tabla, que ahora se muestran como columnas, incorporando las siguientes reglas CSS:

/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

tr:not(:first-child)>* {
  border-left: 0;
}

Estas reglas garantizan que los bordes entre las celdas de la tabla se representen solo en los bordes, proporcionando una distinción clara entre las filas. Al utilizar estas técnicas junto con AngularJS, puede manipular dinámicamente los datos de la tabla mientras conserva la orientación vertical.

Declaración de liberación Este artículo se reimprime en: 1729739506 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3