Zurb foundation table stripe styling

Question

I do not want to the default stripe styling for alternating rows in the Zurb Foundation css framework.

What's the easiest way to remove it?

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

Answer 1

For Foundation 6.4:

By default, table rows are striped. There's an .unstriped class to remove the stripes. If you change $table-is-striped to false to remove stripes from all tables, use the .striped class to add stripes.

So this is now something you can configure, or disable and enable selectively on tables.

For previous versions of Foundation 6, you may have to add the following to your settings or as a last resort, to your main CSS file:

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

This assumes that you @import your Foundation library instead of including the compiled version as a dumb CSS file in your page. The real advantage of a SCSS framework like Foundation is that it's written in SCSS so you can extend and use it in your SCSS.

Answer 2

You can overwrite the foundation table alternating CSS rule using:

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

Answer 3

Or you could go the more semantic route and use mixins. Something like:

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

Should work.