Reference Documentation

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
<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/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 #000}.example table th,.example table td{border-right:1px solid #7a98c6;border-bottom:1px solid #7a98c6;border-left-width:0px;border-top-width:0px}.example table th:last-child,.example table th.last,.example table td:last-child,.example table td.last{border-right-width:0px}.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:0px}.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:0px}.example table thead th{border-bottom:2px solid #000}.example table tfoot th,.example table tfoot td{border-top:2px solid #000}.example table th:first-child{border-right:2px solid #000}