Zurb基础表条纹造型

Question

我不想在Zurb Foundation css框架中交替行的默认条带样式。

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

Answer 1

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

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

Answer 2

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

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

Answer 3

或者你可以使用更多的语义路由并使用mixins。就像是：

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

应该管用。

Answer 4

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

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

Answer 5

在_settings.scss：

$table-color-scale:0%

要么

$table-is-striped: false;

Answer 6

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

因此，现在您可以配置，或者有选择地禁用和启用表。

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

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

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