css - Zurb 基础桌条纹造型

Question

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

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

http://foundation.zurb.com/docs/components/tables.html

Answer 1

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

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

Answer 2

或者你可以走更语义化的路线并使用 mixins。就像是：

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

应该管用。

Answer 3

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

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

Answer 4

对于基础 6.4：

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

因此，您现在可以在表上配置、禁用和启用。

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

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

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

Answer 5

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

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

Answer 6

在_settings.scss任一：

$table-color-scale:0% 

或者

$table-is-striped: false;