テーブル

  1. 通常のテーブル
  2. ボーダーなしテーブル
  3. ボーダーありテーブル
  4. thの色ありテーブル
  5. ストライプのテーブル
  6. hoverテーブル
  7. レスポンシブのテーブル
  8. 管理画面用テーブル
  9. 管理画面用テーブル theadあり
  10. 管理画面用テーブル ストライプ

エントリーではtbodyが自動的に入るが、thead、tfootは入らない

通常のテーブル

.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>

ボーダーなしテーブル

.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>

ボーダーありテーブル

.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>

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>

ストライプテーブル

.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>

trの中のtdにhoverした場合

.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に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
<table class="acms-table acms-table-hover">
...
</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>