Table

  1. basic table
  2. borderless table
  3. bordered table
  4. table with the colored th
  5. Striped table
  6. hover table
  7. responsive table
  8. table for the management screen
  9. table for the management screen with thead
  10. table for the management screen with stripped

tbody will be inserted automatically, but thead and tfoot is not

basic table

.acms-table

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
<table class="acms-table">
...
</table>

borderless table

.acms-table-none

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
<table class="acms-table acms-table-none">
...
</table>

bordered table

.acms-table-bordered

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
<table class="acms-table acms-table-bordered">
...
</table>

table with colored th

.acms-table-heading

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="acms-table acms-table-heading">
...
</table>

stripped table

.acms-table-striped

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="acms-table acms-table-striped">
...
</table>

if td in the tr is hovered

.acms-table-hover

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data

tr is hovered

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="acms-table acms-table-hover">
...
</table>

Responsive table

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
<div class="acms-table-responsive">
<table class="acms-table">
...
</table>
</div>