网站基础6.8.1 更新日志
组件列表

表格

好的，它们不是最吸引人的东西，但表格可以完成工作（当然，对于表格数据而言）。它们具有响应式修饰符，可以根据您的表格需求帮助解决一些布局问题。

基础知识

这里没有花哨的东西，只是一个可以直接满足您所有基本表格需求的表格。

在视频中观看此部分

edit on codepen button 
<table>
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>
表头 表头 表头 表头
内容在此处 这是较长的内容 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处
内容在此处 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处
内容在此处 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处

悬停状态

需要稍微修饰一下表格吗？只需添加类 .hover 即可在悬停时稍微变暗表格行。

在视频中观看此部分

edit on codepen button 
<table class="hover">
</table>
表头 表头 表头 表头
内容在此处 这是较长的内容 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处
内容在此处 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处
内容在此处 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处

条纹

默认情况下，表格行是条纹的。有一个 .unstriped 类可以删除条纹。如果您将 $table-is-striped 更改为 false 以从所有表格中删除条纹，请使用 .striped 类添加条纹。

在视频中观看此部分

edit on codepen button 
<table class="unstriped">
</table>
表头 表头 表头 表头
内容在此处 这是较长的内容 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处
内容在此处 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处
内容在此处 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 内容在此处 内容在此处

堆叠表

要在小屏幕上堆叠表格，请添加类 .stack。

在视频中观看此部分

edit on codepen button 
<table class="stack">
</table>
饼干 口味 卡路里 总体
巧克力曲奇 美味 120卡路里 7.5/10
肉桂曲奇 美味 95卡路里 8/10
燕麦葡萄干 极好的 10卡路里 11/10

滚动表

有很多管状表格数据？在表格周围添加一个带有 .table-scroll 类的包装元素以启用水平滚动。

在视频中观看此部分

包装元素是在 Foundation 6.2 中添加的——在此之前，您只需将 .scroll 类添加到表格本身即可。但是，此方法不适用于 Internet Explorer 9。**如果您不需要 IE9 支持，只需将 .scroll 添加到您的表格中，就不需要包装元素。**

edit on codepen button 
<div class="table-scroll">
  <table></table>
</div>
这是描述！ 一 二 三 四 五 六 七 八 九 十 十一 十二
这些都是人们用来描述 Foundation 6 的所有词汇！ 酷 时尚 冷酷 杀手 狂热 篮球运动员 我的天哪 甜蜜 真棒 野兽 毒品 管状
这些是人们用来描述其他 Web 框架的一些词汇。 随便 呃。 哈哈 K 好吧 嗯。 呜呜... 嗯。 待会见 哎哟。 真的吗？ 为什么？
以下是一些伟大的超级英雄。 蝙蝠侠 超人 蜘蛛侠 神奇女侠 绿巨人 尼古拉斯·凯奇 蚁人 水行侠 美国队长 金刚狼 雷神 钢铁侠
这是一个页脚，以防万一

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称类型默认值描述
$table-background 颜色 $white

表格背景的默认颜色。
$table-color-scale 数字 5%

用于使条纹表格行和表格边框变暗的默认比例。
$table-border 列表 1px solid smart-scale($table-background, $table-color-scale)

表格边框的默认样式。
$table-padding 数字 rem-calc(8 10 10)

表格的默认填充。
$table-hover-scale 数字 2%

用于在悬停时使表格行变暗的默认比例。
$table-row-hover 列表 darken($table-background, $table-hover-scale)

悬停时标准行的默认颜色。
$table-row-stripe-hover 列表 darken($table-background, $table-color-scale + $table-hover-scale)

悬停时条纹行的默认颜色。
$table-is-striped 布尔值 true

如果为 true，则默认情况下表格为条纹状，并创建一个 .unstriped 类。如果为 false，则创建一个 .striped 类。
$table-striped-background 颜色 smart-scale($table-background, $table-color-scale)

条纹行的默认背景颜色。
$table-stripe 关键字 偶数

用于在表格行（不包括页眉和页脚）上显示条纹的默认值。如果为偶数，则偶数行将具有背景颜色。如果为奇数，则奇数行将具有背景颜色。如果为空或任何其他值，则表格行将没有条纹。
$table-head-background 颜色 smart-scale($table-background, $table-color-scale * 0.5)

标题背景的默认颜色。
$table-head-row-hover 列表 darken($table-head-background, $table-hover-scale)

悬停时标题行的默认颜色。
$table-foot-background 颜色 smart-scale($table-background, $table-color-scale)

页脚背景的默认颜色。
$table-foot-row-hover 列表 darken($table-foot-background, $table-hover-scale)

悬停时页脚行的默认颜色。
$table-head-font-color 颜色 $body-font-color

标题的默认字体颜色。
$table-foot-font-color 颜色 $body-font-color

页脚的默认字体颜色。
$show-header-for-stacked 布尔值 false

使用堆叠表时显示标题的默认值。
$table-stack-breakpoint 断点 中等

堆叠表从移动视图切换到桌面视图的断点。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

表

@include table($stripe, $nest);

添加表格的常规样式。

参数类型默认值描述
$stripe 关键字 $table-stripe

使用关键字 even、odd 或 none 来使表格的行变暗。默认值为 even。
$nest 布尔值 false

如果您只想将其应用于特定表格，则需要。

table-scroll

@include table-scroll;

在内容水平溢出时添加水平滚动表格的功能。

table-hover

@include table-hover;

在悬停时稍微变暗表格行。

table-stack

@include table-stack($header);

添加堆叠表的样式。适用于小屏幕布局。

参数类型默认值描述
$header 布尔值 $show-header-for-stacked

堆叠时显示标题的第一个 th。