Compass Table Striping

Add striping to a table in both directions based on a few colors.

This file can be imported using: @import "compass/utilities/tables/alternating-rows-and-columns"

Examples

Compass Table Striping Example: How to use the alternating-rows-and-columns mixin.

Mixins

alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color, $footer-color)

=alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white)
  th
    background-color: $header-color
    &.even, &:nth-child(2n)
      background-color: $header-color - $dark-intersection
  tr.odd
    td
      background-color: $odd-row-color
      &.even, &:nth-child(2n)
        background-color: $odd-row-color - $dark-intersection
  tr.even
    td
      background-color: $even-row-color
      &.even, &:nth-child(2n)
        background-color: $even-row-color - $dark-intersection
  tfoot
    th, td
      background-color: $footer-color
      &.even, &:nth-child(2n)
        background-color: $footer-color - $dark-intersection

@mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) {
  th {
    background-color: $header-color;
    &.even, &:nth-child(2n) {
      background-color: $header-color - $dark-intersection; } }
  tr.odd {
    td {
      background-color: $odd-row-color;
      &.even, &:nth-child(2n) {
        background-color: $odd-row-color - $dark-intersection; } } }
  tr.even {
    td {
      background-color: $even-row-color;
      &.even, &:nth-child(2n) {
        background-color: $even-row-color - $dark-intersection; } } }
  tfoot {
    th, td {
      background-color: $footer-color;
      &.even, &:nth-child(2n) {
        background-color: $footer-color - $dark-intersection; } } } }