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/alternating-rows-and-columns"; .example { table { $table-color: #7a98c6; @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222); } }
@import "compass/utilities/tables/alternating-rows-and-columns" .example table $table-color : #7a98c6 +alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222)
.example table th{background-color:#fff}.example table th.even,.example table th:nth-child(2n){background-color:#ddd}.example table tr.odd td,.example table tr:nth-child(2n+1) td{background-color:#98c67a}.example table tr.odd td.even,.example table tr.odd td:nth-child(2n),.example table tr:nth-child(2n+1) td.even,.example table tr:nth-child(2n+1) 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:#fff}.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:#ddd}