Tablas

Ordena datos en las tablas, tablas que se presenta en dos colores y con una sencilla insercción de clases para los estilos, ya que los mismas están condicionas para la etiqueta <table> practicamente.

Estilos disponibles para las tablas

-- Tabla estilo mínimo

Heading 01 Heading 02 Heading 03
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
HTML

-- Tabla estilo básico

Heading 01 Heading 02 Heading 03
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
HTML

-- Tabla striped

Heading 01 Heading 02 Heading 03
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
HTML

-- Tabla con encabezado color light

Heading 01 Heading 02 Heading 03
Table data Table data Table data
Table data Table data Table data
HTML

-- Tabla con encabezado color dark

Heading 01 Heading 02 Heading 03
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
HTML

-- Tabla full border

Heading 01 Heading 02 Heading 03
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
Table data Table data Table data
HTML

-- Utilidad / tabla responsive

HTML

-- Utilidades

  • # Añade imagenes, iconos, etiqueta de video en la celda de la tabla con las siguientes clases:

    .multimedia-td-sm : Esta clase tiene como propiedades max-width: 60px; y un max-height: 80px;

    .multimedia-td-md : Tiene como propiedades max-width: 70px; y un max-height: 90px;

    HTML 
    
    
    
        
            
    
                Imagen
            
    
            
        
            
    
                
                    #

  • # .table-actions : Hace referencia a la ultima columna ( :last-child ) para habilitar en ella botones o enlaces de controles.

    HTML

  • # .table-mark-(color) : Destaca una fila entera, para una mejor lectura de su contenido. Puedes utilizar 4 colores distintos: table-mark.

    HTML

  • .table-thead-nowrap : Como la clase indica, se hace uso de la propiedad white-space: nowrap; en el encabezado de la tabla.

    HTML

  • .table-tbody-nowrap : Al igual que la anterior, como la clase indica, se hace uso de la propiedad white-space: nowrap; en el cuerpo de la tabla.

    HTML

  • -- Ejemplo de uso de .multimedia-td-sm / .multimedia-td-md

    Header Lorem Header Lorem ipsum Header Img Actions
    Lorem. Lorem ipsum dolor sit amet. image-class Info Edit Delete
    Lorem. Lorem ipsum dolor sit amet. Info Edit Delete

  • -- Ejemplo de uso de .table-actions

    Header Lorem Header Lorem ipsum Actions
    Lorem. Lorem ipsum dolor sit amet. Info Edit Delete

  • -- Ejemplo de uso de .table-mark

    Heading 01 Heading 02 Heading 03
    Table data Table data Table data
    Table data Table data Table data