Table

@@adsense

Main demo

Switch on to enable Metro UI CSS table.

Off On

striped hovered cell-hovered border bordered

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