Tables

Table cells padding, width and bottom margin customization options.

<table class="example-table-1"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-1 {
    .lib-table();
}

Table mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowable values
            
Comment
        
        

            
@_table-width
            
100%
            
'' | false | value
            
Table width
        
        

            
@_cell-padding-horizontal
            
@indent__s
            
'' | false | value
            
Table cell horizontal padding
        
        

            
@_cell-padding-vertical
            
8px
            
'' | false | value
            
Table cell vertical padding
        
        

            
@_table-margin-bottom
            
false
            
'' | false | value
            
Table margin bottom
        
    
  

Table typography

The .lib-table-typography() mixin provides table typography customization options.

<table class="example-table-2"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-2 {
    .lib-table-typography();
}

Table typography mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowable values
            
Comment
        
        

            
@_table-td-font-size 
            
false
            
'' | false | value
            
Table cell font size
        
        

            
@_table-td-color
            
false
            
'' | false | value
            
Table cell font color
        
        

            
@_table-td-font-family
            
false
            
'' | false | value
            
Table cell font family
        
        

            
@_table-td-font-weight
            
false
            
'' | false | value
            
Table cell font weight
        
        

            
@_table-td-line-height
            
false
            
'' | false | value
            
Table cell line height
        
        

            
@_table-td-font-style
            
false
            
'' | false | value
            
Table cell font style
        
        

            
@_table-th-font-size
            
false
            
'' | false | value
            
Table header cell font size
        
        

            
@_table-th-color
            
@text__color__intense
            
'' | false | value
            
Table header cell font color
        
        

            
@_table-th-font-family
            
false
            
'' | false | value
            
Table header cell font family
        
        

            
@_table-th-font-weight
            
@font-weight__bold
            
'' | false | value
            
Table header cell font weight
        
        

            
@_table-th-line-height
            
false
            
'' | false | value
            
Table header cell line height
        
        

            
@_table-th-font-style
            
false
            
'' | false | value
            
Table header cell font style
        
    
  

Table caption

The .lib-table-caption() mixin is used to customize table caption.

<table class="example-table-3"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-3 {
    .lib-table();
    .lib-table-caption(@_table-caption-color: #f00);
}

Table caption mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowable values
            
Comment
        
        

            
@_table-caption-hide
            
true
            
'' | false | value
            
Table caption is visible
        
        

            
@_table-caption-font-size
            
false
            
'' | false | value
            
Table caption font size
        
        

            
@_table-caption-color
            
false
            
'' | false | value
            
Table caption text color
        
        

            
@_table-caption-font-family
            
false
            
'' | false | value
            
Table caption font family
        
        

            
@_table-caption-font-weight
            
false
            
'' | false | value
            
Table caption font weight
        
        

            
@_table-caption-font-style
            
false
            
'' | false | value
            
Table caption font style
        
        

            
@_table-caption-line-height
            
false
            
'' | false | value
            
Table caption line height
        
        

            
@_table-caption-alignment
            
false
            
'' | false | value
            
Table caption alignment
        
        

            
@_table-caption-margin-top
            
false
            
'' | false | value
            
Table caption top margin
        
        

            
@_table-caption-margin-bottom
            
false
            
'' | false | value
            
Table caption bottom margin
        
    
  

Table cells resize

The .lib-table-resize() mixin provides table header cells and table cells paddings reset.

<table class="example-table-4"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-4 {
    .lib-table();
    .lib-table-resize(
        @_td-padding-top: 15px,
        @_td-padding-right: 25px,
        @_td-padding-bottom: 5px,
        @_td-padding-left: 0,
        @_th-padding-top: 15px,
        @_th-padding-right: 25px,
        @_th-padding-bottom: 10px,
        @_th-padding-left: 0
    );
}

Table cells resize variables

    

        

            
Mixin variable
            
Default value
            
Allowable values
            
Comment
        
        

            
@_th-padding-top
            
@_td-padding-top
            
'' | false | value
            
Table header cell top padding
        
        

            
@_th-padding-right
            
@_td-padding-right
            
'' | false | value
            
Table header cell right padding
        
        

            
@_th-padding-bottom
            
@_td-padding-top
            
'' | false | value
            
Table header cell bottom padding
        
        

            
@_th-padding-left
            
@_td-padding-right
            
'' | false | value
            
Table header cell left padding
        
        

            
@_td-padding-top
            
@table-cell__padding-vertical / 2
            
'' | false | value
            
Table cell top padding
        
        

            
@_td-padding-right
            
@table-cell__padding-horizontal / 2
            
'' | false | value
            
Table cell right padding
        
        

            
@_td-padding-bottom
            
@_td-padding-top
            
'' | false | value
            
Table cell bottom padding
        
        

            
@_td-padding-left
            
@_td-padding-right
            
'' | false | value
            
Table cell left padding
        
    
  

Table background customization

The .lib-table-background-color() mixin provides table cells background customization options.

<table class="example-table-5"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-5 {
    .lib-table();
    .lib-table-background-color(
        @_table-background-color: #fff,
        @_table-head-background-color: #ccf,
        @_table-foot-background-color: #cff,
        @_table-td-background-color: #fcc,
        @_table-body-th-background-color: #ffc
    );
}

Table background mixin variables

    

        

            
Mixin variable
            
Allowable values
            
Variables list names
            
Comment
        
        

            
@_table-background-color
            
false
            
'' | false | value
            
Table background
        
        

            
@_table-head-background-color
            
@table__background-color
            
'' | false | value
            
Table thead background
        
        

            
@_table-foot-background-color
            
@table__background-color
            
'' | false | value
            
Table tfoot background
        
        

            
@_table-body-th-background-color
            
@table__background-color
            
'' | false | value
            
Table header cells background
        
        

            
@_table-td-background-color
            
@table__background-color
            
'' | false | value
            
Table cells background
        
    
  

Table borders customization

The .lib-table-bordered() mixin provides table borders customization options. To setup table borders use the following allowed values for the @_type variable:

  normal - all borders are set up
  horizontal - table head and table cells have only horizontal borders
  vertical - table head and table cells have only vertical borders
  light - only table head cells have bottom border
  clear - table does not have borders

<table class="example-table-6"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-6 {
    .lib-table();
    .lib-table-bordered();
}

Table borders mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_table_type
            
normal
            
normal | horizontal | vertical | light | clear | horizontal_body
            
Table border settings. When is set to "horizontal_body", the table border settings are applyed only for tbody
        
        

            
@_table_border-width
            
@border-width__base
            
'' | false | value
            
Table border width
        
        

            
@_table_border-style
            
solid
            
'' | false | value
            
Table border style
        
        

            
@_table_border-color
            
@border-color__base
            
'' | false | value
            
Table border color
        
    
  

Table with horizontal borders

To set only horizontal borders for a table use:

  .lib-table-bordered(@_table_type: horizontal)

<table class="example-table-7"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-7 {
    .lib-table();
    .lib-table-bordered(
        @_table_type: horizontal
    );
}

Table with vertical borders

To set only horizontal borders for a table use:

  .lib-table-bordered(@_table_type: vertical)

<table class="example-table-8"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-8 {
    .lib-table();
    .lib-table-bordered(
        @_table_type: vertical
    );
}

Table with light borders

To set bottom borders only for a table caption use:

  .lib-table-bordered(@_table_type: light)

<table class="example-table-9"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-9 {
    .lib-table();
    .lib-table-bordered(
        @_table_type: light
    );
}

Table without borders

To clear all table borders use:

  .lib-table-bordered(@_table_type: clear)

<table class="example-table-10"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-10 {
    .lib-table();
    .lib-table-bordered(
        @_table_type: clear
    );
}

Striped table

The .lib-table-striped() mixin sets color backgrounds to table rows.

<table class="example-table-11"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-11 {
    .lib-table();
    .lib-table-striped(
        @_stripped-background-color: #ffc,
        @_stripped-color: #000,
        @_stripped-direction: horizontal,
        @_stripped-highlight: even
    );
}

Striped table mixin variables

    

        

            
Mixin variable
            
Variables list names
            
Default value
            
Allowed values
            
Comment
        
        

            
@_stripped-background-color
            
@table-cell-stripped__background-color
            
lighten(@table-cell__hover__background-color, 15%)
            
'' | false | value
            
Striped cells background color
        
        

            
@_stripped-color
            
@table-td__color
            
@text__color
            
'' | false | value
            
Striped cells text color
        
        

            
@_stripped-direction
            
-
            
horizontal
            
horizontal | vertical
            
Stripes direction
        
        

            
@_stripped-highlight
            
-
            
odd
            
odd | even
            
Rows stripes are applyed to
        
    
  

Table with rows hover

The .lib-table-hover() mixin sets color backgrounds to hovered table rows.

<table class="example-table-12"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-12 {
    .lib-table();
    .lib-table-hover();
}

Table with rows hover mixin variables

    

        

            
Mixin variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_table_cell-background-color-hover
            
@panel__background-color
            
'' | false | value
            
Hovered table row background
        
        

            
@_table_cell-odd-background-color-hover
            
@_table_cell-background-color-hover
            
'' | false | value
            
Hovered table odd row background
        
    
  

Responsive table technics #1

Magento UI library employs two responsive tables technics which are applyed by calling an appropriate mixin.

The .lib-table-overflow() mixin adds a horizontal scrollbar for a table. This mixin accepts no variables.

<div class="example-table-14"> <table class="example-table-13"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> </tbody> </table> </div>

.example-table-13 {
    .lib-table();
    .lib-table-bordered();
    .lib-table-striped();
    .lib-table-hover();
}

@media only screen and (max-width: @screen__m) {
    .example-table-14 {
        .lib-table-overflow();
    }
}

Responsive table technics #2

The .lib-table-responsive() mixin rearranges table cells for mobile version.

<table class="example-table-15"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th colspan="6">Table summary</th> <td data-th="Table summary">Table footer text</td> </tr> </tfoot> <tbody> <tr> <th data-th="Name" scope="row">Mark</th> <td data-th="Username">@mdo</td> <td data-th="Phone">+1 123 456 432</td> <td data-th="Site"><a href="https://www.google.com">www.google.com</a></td> <td data-th="Age">23</td> <td data-th="Job">qa</td> <td data-th="Status">offline</td> </tr> <tr> <th data-th="Name" scope="row">Alex</th> <td data-th="Username">@alex</td> <td data-th="Phone">+1 333 222 111</td> <td data-th="Site"><a href="http://magento.com/">magento.com</a></td> <td data-th="Age">32</td> <td data-th="Job">manager</td> <td data-th="Status">online</td> </tr> <tr> <th data-th="Name" scope="row">Daniel</th> <td data-th="Username">@danik</td> <td data-th="Phone">+1 334 328 975</td> <td data-th="Site"><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td data-th="Age">18</td> <td data-th="Job">developer</td> <td data-th="Status">offline</td> </tr> <tr> <th data-th="Name" scope="row">Kate</th> <td data-th="Username">@kateUA</td> <td data-th="Phone">+1 888 777 888</td> <td data-th="Site"><a href="https://www.twitter.com">www.twitter.com</a></td> <td data-th="Age">18</td> <td data-th="Job">HR</td> <td data-th="Status">online</td> </tr> </tbody> </table>

.example-table-15 {
    .lib-table();
    .lib-table-bordered();
    .lib-table-striped();
    .lib-table-hover();
}

@media only screen and (max-width: @screen__m) {
    .example-table-15 {
        .lib-table-responsive(
            @_table-background-color-responsive: #cff,
            @_table-th-background-color-responsive: #ffc,
            @_reset-table-striped: true,
            @_reset-table-hover: true
        );
    }
}

Responsive table technics #2 mixin variables

    

        

            
Mixin variable
            
Variables list names
            
Default value
            
Allowed values
            
Comment
        
        

            
@_table-background-color-responsive
            
@table-responsive__background-color
            
@table__background-color
            
'' | false | value
            
Responsive table background
        
        

            
@_table-th-background-color-responsive
            
@table-responsive-th__background-color
            
false
            
'' | false | value
            
Responsive table header cells background
        
        

            
@_reset-table-striped
            
false
            
-
            
true | false
            
Responsive table striped cells
        
        

            
@_reset-table-hover
            
false
            
-
            
true | false
            
Responsive table hovered table row background
        
        

            
@_table-responsive-cell-padding
            
@indent__xs 0
            
-
            
true | false
            
Responsive table cells padding