Table


The table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it's cross browser friendly back to at least IE9.

Additional margin or padding may be required to properly space content.

Feature

We can enhance some extra features in a table.

we can use CSS class .fixed-header in the table header.

Related Class:- jds-table, table-hover, jds-shadow-xxs, jds-bg-background

Deafult Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-hover, thead-dark

hover Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-striped, table-hover

striped Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px
borderless Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, thead-light, table-dark, table-hover

dark Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-black, table-hover

table-dark table-black table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-white, table-hover, thead-light

jds-table table-white table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-primary, table-hover, thead-light

dark thead-light table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-success, table-hover

dark thead-light table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-primary, table-hover

dark thead-light table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-gray, table-hover

dark thead-light table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-error, table-hover

dark thead-light table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Related Class:- jds-table, table-dark, table-tertiary, table-hover

dark thead-light table-hover
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Table Sticky Head Class:- jds-table, table-sticky-head

Breakpoint Syntax Description
light fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px
Breakpoint Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Table Sizes Class:- jds-table, table-xl, table-lg, table-md, table-sm

jds-table and table-xl

Breakpoint Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

jds-table and table-lg

Breakpoint Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

jds-table and table-md

Breakpoint Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

jds-table and table-sm

Breakpoint Syntax Description
Fluid fl min-width: auto
Extra-large xl min-width: 1920px
Large l min-width: 1366px
Medium m min-width: 992px
Small s min-width: 768px

Code view


    
        

            Breakpoint
            Syntax
            Description
        

    
    
        

            Fluid
            fl
            min-width: auto
        

        

            Extra-large
            xl
            min-width: 1920px
        

        

            Large
            l
            min-width: 1366px
        

        
        

            Medium
            m
            min-width: 992px
        

        

            Small
            s
            min-width: 768px