Table
@@adsenseMain 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>