Demo: Compass Table 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 "https://compass-style.org/files/docs/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/docs/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), #222)
    
  • .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: 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 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 {
      background-color: #98c67a;
    }
    .example table tr.odd td.even, .example table tr.odd 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;
    }