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}