テーブル

  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>