# テーブル

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

    <table class="acms-table acms-table-hover">
    ...
    </table>

## 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-line">
    ...
    </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>