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

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

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

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

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

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

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

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

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

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