基础 - 表格 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

打印页面