Bulma Table Variables

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. 

Bulma supports a lot of types of tables like a bordered table, stripped table, hoverable table, scrollable table, etc. Just by adding some Bulma classes to the HTML, we can achieve very interactive tables.

 Syntax to use variables:

$property-name: Property-value;

Variable Used:

Name	Description	Type	Value	Computed Value	Computed Type
$table-color	This property is used to provide color to the table.	variable	$text-strong	hsl(0, 0%, 21%)	color
$table-background-color	This property is used to provide background color to the table.	variable	$scheme-main	hsl(0, 0%, 100%)	color
$table-cell-border	This property is used to provide a border cell to the table.	size	1px solid $border
$table-cell-border-width	This property is used to define the border width of the table.	size	0 0 1px
$table-cell-padding	This property is used to define the padding of the cell in the table.	size	0.5em 0.75em
$table-cell-heading-color	This property is used to provide color to the heading cell of the table.	variable	$text-strong	hsl(0, 0%, 21%)	color
$table-cell-text-align	This property is used to align text into the center of the cell in the table.	string	left
$table-head-cell-border-width	This property is used to define the width of the head cell border.	size	0 0 2px
$table-head-cell-color	This property is used to define the color of the head cell of the table.	variable	$text-strong	hsl(0, 0%, 21%)	color
$table-foot-cell-border-width	This property is used to define the width of the foot cell in the table.	size	2px 0 0
$table-foot-cell-color	This property is used to define the color of the foot of the cell.	variable	$text-strong	hsl(0, 0%, 21%)	color
$table-head-background-color	This property is used to provide the background color of the head of the table.	string	transparent
$table-body-background-color	This property is used to provide the background color of the body.	string	transparent
$table-foot-background-color	This property is used to provide background color to the foot table.	string	transparent
$table-row-hover-background-color	This property is used to provide background color to the row table on hover.	variable	$scheme-main-bis	hsl(0, 0%, 98%)	color
$table-row-active-background-color	This property is used to provide background color to the active row.	variable	$primary	hsl(171, 100%, 41%)	color
$table-row-active-color	This property is used to provide color to the active row of the table.	variable	$primary-invert	#fff	color
$table-striped-row-even-background-color	This property is used to provide background color to the even row.	variable	$scheme-main-bis	hsl(0, 0%, 98%)	color
$table-striped-row-even-hover-background-color	This property is used to provide background color to the even rows on hover.	variable	$scheme-main-ter	hsl(0, 0%, 96%)	color
$table-colors	This property is used to provide color to the table.	variable	$colors	Bulma colors	map

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the table.

SCSS Code:

$table-colors:lightgreen;
.table{
 color:$table-colors;
}

Compiled CSS Code:

.table {
 color: lightgreen; }

Output:

👁 Image

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the table.

SCSS Code:

$table-background-color:lightgreen;
.table{
 background-color:$table-background-color;
 }

Compiled CSS Code:

.table {
 background-color: lightgreen;
 }

Output:

👁 Image

Reference: https://bulma.io/documentation/elements/table/#variables