テーブル
- 通常のテーブル
- ボーダーなしテーブル
- ボーダーありテーブル
- thの色ありテーブル
- ストライプのテーブル
- hoverテーブル
- レスポンシブのテーブル
- 管理画面用テーブル
- 管理画面用テーブル theadあり
- 管理画面用テーブル ストライプ
エントリーでは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>