Demo: Compass Table Borders 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

html haml

<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

scss sass css

@import "compass/utilities/tables/borders";

.example {
  table {
    @include inner-table-borders(1px, #7a98c6);
    @include outer-table-borders(2px);
  }
}

@import compass/utilities/tables/borders

.example
  table
    +inner-table-borders(1px, #7a98c6)
    +outer-table-borders(2px)

.example table {
  border: 2px solid black;
}
.example table th, .example table td {
  border-right: 1px solid #7a98c6;
  border-bottom: 1px solid #7a98c6;
  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;
}