テーブル

ストライプ、ボーダー、ホバー、コンパクトバリアント付きスタイルテーブル。

基本的な使い方

名前	タイプ	ステータス
アイテム 1	ファイル	アクティブ
アイテム 2	フォルダ	非アクティブ
アイテム 3	ファイル	アクティブ

<table class="kit-table">
  <thead>
    <tr><th>名前</th><th>タイプ</th><th>ステータス</th></tr>
  </thead>
  <tbody>
    <tr><td>アイテム 1</td><td>ファイル</td><td>アクティブ</td></tr>
    <tr><td>アイテム 2</td><td>フォルダ</td><td>非アクティブ</td></tr>
    <tr><td>アイテム 3</td><td>ファイル</td><td>アクティブ</td></tr>
  </tbody>
</table>

ストライプ

名前	値
行 1	値 1
行 2	値 2
行 3	値 3
行 4	値 4

<table class="kit-table -striped">...</table>

ボーダー

A	B	C
1	2	3
4	5	6

<table class="kit-table -bordered">...</table>

ホバー

名前	アクション
ホバーしてみてください	行 1
ホバーしてみてください	行 2

<table class="kit-table -hoverable">...</table>

コンパクト

ID	名前	ステータス
1	プロセス A	実行中
2	プロセス B	停止
3	プロセス C	実行中

<table class="kit-table -compact -bordered">...</table>

セマンティックヘッダーカラー

名前	値
アイテム	100

<table class="kit-table -primary">...</table>

レスポンシブ

列 1	列 2	列 3	列 4	列 5
データ	データ	データ	データ	データ

<div class="kit-table-responsive">
  <table class="kit-table">...</table>
</div>