Table
@@adsense
Main demo
Switch on to enable Metro UI CSS table.
Header 1 |
Header 2 |
Header 3 |
a |
b |
c |
a |
b |
c |
a |
b |
c |
a |
b |
c |
a |
b |
c |
Main class
To enable Metro UI CSS table style, you must add class table to you table element.
<table class="table">...</table>
Additional classes
To enable any futures you can add sub-classes: striped, hovered, cell-hovered, border, bordered, to you table element.
<table class="table striped hovered cell-hovered border bordered">...</table>
Sortable styling
Header 1 |
Header 2 (sort marker left) |
Header 3 |
a |
b |
c |
a |
b |
c |
Header 1 (sort-asc) |
Header 2 |
Header 3 (sort-desc) |
a |
b |
c |
a |
b |
c |
Sortable marker right
<table class="table">
<thead>
<tr>
<th class="sortable-column">Column</th>
<th class="sortable-column sort-asc">Column</th>
<th class="sortable-column sort-desc">Column</th>
</tr>
</thead>
</table>
Sortable marker left
<table class="table sortable-markers-on-left">
<thead>
<tr>
<th class="sortable-column">Column</th>
<th class="sortable-column sort-asc">Column</th>
<th class="sortable-column sort-desc">Column</th>
</tr>
</thead>
</table>
Header 1 |
Header 2 |
Header 3 |
a |
b |
c |
a |
b |
c |
a |
b |
c |
a |
b |
c |
a |
b |
c |