# テーブル

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

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

## 通常のテーブル

### .%{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table">
    ...
    </table>

## ボーダーなしテーブル

### .%{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table %{STYLEGUIDE_PAGE}-table-none">
    ...
    </table>

## ボーダーありテーブル

### .%{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table %{STYLEGUIDE_PAGE}-table-bordered">
    ...
    </table>

## thの色ありテーブル

### .%{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table %{STYLEGUIDE_PAGE}-table-heading">
    ...
    </table>

## ストライプテーブル

### .%{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table %{STYLEGUIDE_PAGE}-table-striped">
    ...
    </table>

## trの中のtdにhoverした場合

### .%{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table %{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table %{STYLEGUIDE_PAGE}-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="%{STYLEGUIDE_PAGE}-table-responsive">
    <table class="%{STYLEGUIDE_PAGE}-table">
    ...
    </table>
    </div>