Reference Documentation

Demo: Compass Table Striping Example

Title One Two Three Four Row Total
Single 1.0 2.0 3.0 4.0 10.0
Tens 10.0 20.0 30.0 40.0 100.0
Total 11.0 22.0 33.0 44.0 110.0
<div class='example'>
  <table cellspacing='0'>
    <thead>
      <tr class='odd'>
        <th>Title</th>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Row Total</th>
      </tr>
    </thead>
    <tbody>
      <tr class='even'>
        <th>Single</th>
        <td class='numeric'>1.0</td>
        <td class='numeric'>2.0</td>
        <td class='numeric'>3.0</td>
        <td class='numeric'>4.0</td>
        <td class='numeric'>10.0</td>
      </tr>
      <tr class='odd'>
        <th>Tens</th>
        <td class='numeric'>10.0</td>
        <td class='numeric'>20.0</td>
        <td class='numeric'>30.0</td>
        <td class='numeric'>40.0</td>
        <td class='numeric'>100.0</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class='even'>
        <th>Total</th>
        <td class='numeric'>11.0</td>
        <td class='numeric'>22.0</td>
        <td class='numeric'>33.0</td>
        <td class='numeric'>44.0</td>
        <td class='numeric'>110.0</td>
      </tr>
    </tfoot>
  </table>
</div>
.example
  %table{:cellspacing => "0"}
    %thead
      %tr.odd
        %th Title
        %th One
        %th Two
        %th Three
        %th Four
        %th Row Total
    %tbody
      %tr.even
        %th Single
        %td.numeric 1.0
        %td.numeric 2.0
        %td.numeric 3.0
        %td.numeric 4.0
        %td.numeric 10.0
      %tr.odd
        %th Tens
        %td.numeric 10.0
        %td.numeric 20.0
        %td.numeric 30.0
        %td.numeric 40.0
        %td.numeric 100.0
    %tfoot
      %tr.even
        %th Total
        %td.numeric 11.0
        %td.numeric 22.0
        %td.numeric 33.0
        %td.numeric 44.0
        %td.numeric 110.0
@import "compass/utilities/tables/alternating-rows-and-columns";

.example {
  table {
    $table-color: #7a98c6;
    @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222);
  }
}
@import "compass/utilities/tables/alternating-rows-and-columns"
.example
  table
    $table-color : #7a98c6
    +alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222)
.example table th{background-color:#fff}.example table th.even,.example table th:nth-child(2n){background-color:#ddd}.example table tr.odd td,.example table tr:nth-child(2n+1) td{background-color:#98c67a}.example table tr.odd td.even,.example table tr.odd td:nth-child(2n),.example table tr:nth-child(2n+1) td.even,.example table tr:nth-child(2n+1) td:nth-child(2n){background-color:#76a458}.example table tr.even td{background-color:#7a98c6}.example table tr.even td.even,.example table tr.even td:nth-child(2n){background-color:#5876a4}.example table tfoot th,.example table tfoot td{background-color:#fff}.example table tfoot th.even,.example table tfoot th:nth-child(2n),.example table tfoot td.even,.example table tfoot td:nth-child(2n){background-color:#ddd}