Demo: Compass Table Scaffolding 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/scaffolding";
    .example {
      table {
        @include table-scaffolding; } }
    
  • @import "https://compass-style.org/files/docs/examples/compass/tables/compass/utilities/tables/scaffolding"
    .example
      table
        +table-scaffolding
    
  • .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;
    }