Table classes

These classes are designed to be used either together or separate. A default table has no lines, only spaces.

Class	Effect	Code
table	Adds a border around the table rows, footer becomes smaller and italic	`<table class="table">`
hover	Adds a color on the row where you hover your mouse	`<table class="hover">`
sticky-header	Can be used with table container. It makes the header be sticky.	`<table class="sticky-header">`
striped	Adds zebra stripe to the table in grey/white	`<table class="striped">`
align-top	Aligns all the table cells in the body to the top	`<table class="align-top">`
align-middle	Aligns all the table cells in the body to the middle	`<table class="align-middle">`
align-bottom	Aligns all the table cells in the body to the bottom	`<table class="align-bottom">`

Container class:
table-container	Just add the specified height and use the sticky-header to get a nice scrollable table	`<div class="table-container" style="height:12vh;"></div>`

Examples

Top ↑