# 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
                Global variable
                Default value
                Allowed values
                Comment

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

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

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

                @_table-margin-bottom
                @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
                Global variable
                Default value
                Allowed values
                Comment

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

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

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

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

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

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

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

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

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

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

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

                @_table-th-font-style
                @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
                Global variable
                Default value
                Allowed values
                Comment

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

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

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

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

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

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

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

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

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

                @_table-caption-margin-bottom
                @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
                Global variable
                Default value
                Allowed values
                Comment

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

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

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

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

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

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

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

                @_td-padding-left
                @table-cell__padding-horizontal / 2
                @_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
                Global variable
                Default value
                Allowed values
                Comment

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

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

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

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

                @_table-td-background-color
                @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
                Global 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 applied only for tbody

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

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

                @_table_border-color
                @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
                Global variable
                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-cell-stripped__color
                @text__color
                '' | false | value
                Striped cells text color

                @_stripped-direction
                -
                horizontal
                horizontal | vertical
                Stripes direction

                @_stripped-highlight
                -
                odd
                odd | even
                Rows stripes are applied 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
                Global variable
                Default value
                Allowed values
                Comment

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

                @_table_cell-odd-background-color-hover
                @table-cell__hover__background-color
                @_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 applied 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
                Global variable
                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
                @table-responsive-cell__padding
                @indent__xs 0
                true | false
                Responsive table cells padding