基礎 - 表格 Sass 參考

變數

您可以使用下表列出的以下 Sass 變數更改元件的樣式。

序號	名稱及描述	型別	預設值
1	$table-background 應用於表格的背景顏色。	顏色	$white
2	$table-color-scale 指定用於加深條紋表格行和邊框的比例。	數字	5%
3	$table-border 定義表格邊框的樣式。	列表	1px solid smart-scale($table-background, $table-color-scale)
4	$table-padding 提供表格的內邊距。	數字	rem-calc(8 10 10)
5	$table-hover-scale 指定用於加深懸停時條紋表格行的比例。	數字	2%
6	$table-row-hover 應用於標準行懸停時的顏色。	列表	darken($table-background, $table-hover-scale)
7	$table-row-stripe-hover 應用於條紋行懸停時的顏色。	列表	darken($table-background, $table-color-scale + $table-hover-scale)
8	$table-striped-background 提供條紋行的背景顏色。	顏色	smart-scale($table-background, $table-color-scale)
9	$table-stripe 在表格行上顯示條紋。如果行是偶數，則偶數行將具有背景顏色；如果行是奇數，則奇數行將具有背景顏色。如果行為空或任何其他值，則表格行將沒有條紋。	關鍵字	even
10	$table-head-background 指定表頭背景的顏色。	顏色	smart-scale($table-background, $table-color-scale / 2)
11	$table-foot-background 指定表尾背景的顏色。	顏色	smart-scale($table-background, $table-color-scale)
12	$table-head-font-color 定義表頭的字型顏色。	顏色	$body-font-color
13	$show-header-for-stacked 顯示使用堆疊表格時表頭的預設值。	布林值	false

您可以使用混合宏構建元件的 CSS 類結構，如下所述：

它為表格新增樣式，並且可以使用以下混合宏包含樣式：

@include table($stripe);

它使用以下表格中定義的引數：

序號	引數及描述	型別	預設值
1	$stripe 使用 even、odd 或 none 值在表格行上顯示條紋。Even 是預設值。	關鍵字	$table-stripe

序號

引數及描述

型別

預設值

$stripe

使用 even、odd 或 none 值在表格行上顯示條紋。Even 是預設值。

關鍵字

$table-stripe

使用以下混合宏水平滾動表格：

@include table-scroll;

使用以下混合宏將滑鼠懸停在表格行上：

@include table-hover;

它為堆疊表格新增樣式。

@include table-stack($header);

它使用以下表格中定義的引數：

序號	引數及描述	型別	預設值
1	$header 當表格堆疊時，它顯示錶頭。	布林值	$show-header-for-stacked

序號

引數及描述

型別

預設值

$header

當表格堆疊時，它顯示錶頭。

布林值

$show-header-for-stacked

foundation_containers.htm

列印頁面