Zurb Foundation表格条纹样式化

Question

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

最简单的方法是什么？

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

- Yada

Answer 1

您可以使用以下代码来覆盖基础表格的交替CSS规则：

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

- Irvin Dominin

---

这是一份非常好的工作说明！谢谢！ - Combine

这不是一个好的解决方案，因为它会覆盖现有的CSS，并且使用了!important，这总是一件坏事。 - Robin Daugherty

Answer 2

对于Foundation 6.4版本：

默认情况下，表格行是有条纹的。有一个“.unstriped”类可以去掉条纹。如果你把“$table-is-striped”改为false以从所有表格中删除条纹，则使用“.striped”类添加条纹。

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

对于以前的Foundation 6版本，您可能需要将以下内容添加到您的“设置”中，或者作为最后一招添加到您的主CSS文件中：

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

这里假设您使用@import导入Foundation库，而非将编译后的版本作为CSS文件直接包含在页面中。SCSS框架（如Foundation）的真正优势在于它是用SCSS编写的，因此您可以在自己的SCSS中扩展和使用它。

- Robin Daugherty

---

这应该在顶部附近。使用!important的已接受解决方案让我感到不舒服。 - Scarlet

Answer 3

或者您可以采用更语义化的方式，使用混合器。像这样：

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

应该可以工作。

- aspencer8111

Answer 4

我查看了您提供的链接，似乎您只需要在css中删除这个部分即可：

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

- Mathias Rechtzigel

Answer 5

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

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

- rcatwr

Answer 6

在 _settings.scss 文件中：

$table-color-scale:0% 

或者

$table-is-striped: false;

- hawbsl