Zurb 基础桌条纹造型答案

【问题标题】：Zurb foundation table stripe stylingZurb 基础桌条纹造型
【发布时间】：2019-03-14 07:30:21
【问题描述】：

我不想使用 Zurb Foundation css 框架中交替行的默认条纹样式。

删除它的最简单方法是什么？

【问题讨论】：

【解决方案1】：

您可以使用以下方法覆盖基础表交替 CSS 规则：

table tr:nth-of-type(even) {
    background-color: transparent !important;
}

【讨论】：

【解决方案2】：

我查看了您提供的链接，看起来您所要做的就是在 css 中删除此段：

table tr:nth-of-type(even) {
background: #f9f9f9;
}

【讨论】：

【解决方案3】：

或者你可以走更语义化的路线并使用 mixins。比如：

$table-bg: #fff;
$table-even-row-bg: #fff;

应该可以。

【讨论】：

【解决方案4】：

对于Foundation 6.4：

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

因此，您现在可以对表格进行配置，或者选择性地禁用和启用。

对于 Foundation 6 的早期版本，您可能必须将以下内容添加到您的 settings 或作为最后的手段，添加到您的主 CSS 文件中：

$table-striped-background: $table-background;

这假定您 @import 您的 Foundation 库，而不是在您的页面中包含已编译版本作为哑 CSS 文件。像 Foundation 这样的 SCSS 框架的真正优势在于它是用 SCSS 编写的，因此您可以在 SCSS 中扩展和使用它。

【讨论】：

【解决方案5】：

我正在将 ZURB 堆栈集成到我的工作流程中，我需要一些条带化表格和一些非条带化表格。我正在使用无法在后端修改的表类，但使用 SASS，我能够像这样删除条纹：

.table-special{
  @extend: .unstriped;
}

【讨论】：

【解决方案6】：

在_settings.scss 中：

$table-color-scale:0%

或

$table-is-striped: false;

【讨论】：