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; }