Demo: Compass Table Example

<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 "https://compass-style.org/files/beta-sub/examples/compass/tables/compass/utilities/tables";
.example {
  table {
    $table-color: #7a98c6;
    @include table-scaffolding;
    @include inner-table-borders(1px, darken($table-color, 40%));
    @include outer-table-borders(2px);
    @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222);
  }
}

@import https://compass-style.org/files/beta-sub/examples/compass/tables/compass/utilities/tables
.example
  table
    $table-color: #7a98c6
    +table-scaffolding
    +inner-table-borders(1px, darken($table-color, 40%))
    +outer-table-borders(2px)
    +alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222)

.example table {
  border: 2px solid black;
}
.example table th {
  text-align: center;
  font-weight: bold;
}
.example table td,
.example table th {
  padding: 2px;
}
.example table td.numeric,
.example table th.numeric {
  text-align: right;
}
.example table th, .example table td {
  border-right: 1px solid #233551;
  border-bottom: 1px solid #233551;
  border-left-width: 0;
  border-top-width: 0;
}
.example table th:last-child, .example table td:last-child {
  border-right-width: 0;
}
.example table th.last, .example table td.last {
  border-right-width: 0;
}
.example table tbody tr:last-child th, .example table tbody tr:last-child td, .example table tfoot tr:last-child th, .example table tfoot tr:last-child td {
  border-bottom-width: 0;
}
.example table tbody tr.last th, .example table tbody tr.last td, .example table tfoot tr.last th, .example table tfoot tr.last td {
  border-bottom-width: 0;
}
.example table thead th {
  border-bottom: 2px solid black;
}
.example table tfoot th, .example table tfoot td {
  border-top: 2px solid black;
}
.example table th:first-child {
  border-right: 2px solid black;
}
.example table th {
  background-color: white;
}
.example table th.even, .example table th:nth-child(2n) {
  background-color: #dddddd;
}
.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: white;
}
.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: #dddddd;
}