- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Table Sass Reference
Variables
You can change the styles of the components by using the following SASS variables as listed in the table.
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$table-background Applies the background color for the table. |
Color | $white |
2 |
$table-color-scale It specifies the scale for darkening the striped table rows and border. |
Number | 5% |
3 |
$table-border It defines the style for the table border. |
List | 1px solid smart-scale($table-background, $table-color-scale) |
4 |
$table-padding It provides padding of the table. |
Number | rem-calc(8 10 10) |
5 |
$table-hover-scale It specifies the scale for darkening the striped table rows on hover. |
Number | 2% |
6 |
$table-row-hover Applies the color for standard rows on hover. |
List | darken($table-background, $table-hover-scale) |
7 | $table-row-stripe-hover Applies the color for striped rows on hover. |
List | darken($table-background, $table-color-scale + $table-hover-scale) |
8 |
$table-striped-background It provides the background color for striped rows. |
Color | smart-scale($table-background, $table-color-scale) |
9 |
$table-stripe It shows the stripe on table rows. If a row is even, then even rows will have a background color and if a row is odd, then odd rows will have a background color. If row is empty or anyother value, then the table rows will have no stripes. |
Keyoword | even |
10 |
$table-head-background It specifies the color of header background. |
Color | smart-scale($table-background, $table-color-scale / 2) |
11 | $table-foot-background It specifies the color of footer background. |
Color | smart-scale($table-background, $table-color-scale) |
12 | $table-head-font-color It defines the font color of a header. |
Color | $body-font-color |
13 | $show-header-for-stacked It shows the defualt value for the header when using stacked tables. |
Boolean | false |
Mixins
You can use the mixins to build the CSS class structure for your components as described below −
table
It adds styles for tables and styles can be included using the following mixin −
@include table($stripe);
It uses the parameter as defined in the following table −
Sr.No. | Parameter & Description | Type | Default Value |
---|---|---|---|
1 | $stripe It shows the stripe on table rows using even, odd or none value. Even is the default value. |
Keyword | $table-stripe |
table-scroll
It scrolls the table horizontally by using the following mixin −
@include table-scroll;
table-hover
It hovers on the table rows by using the following mixin −
@include table-hover;
table-stack
It adds styles for the stacked table.
@include table-stack($header);
It uses the parameter as defined in the following table −
Sr.No. | Parameter & Description | Type | Default Value |
---|---|---|---|
1 | $header It shows the header when table is stacked. |
Boolean | $show-header-for-stacked |
To Continue Learning Please Login
Login with Google