Tables

サンプル01-テーブル表示(通常表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

通常表示は外枠無しでテーブルを表示します

コーディング
01行目
<table>内で.tableを指定するだけで、それ以外は特に使い方に変わりはありません

サンプル02-テーブル表示(ストライプ表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

テーブルをストライプ表示します

コーディング
01行目
<table>内で.table-stripedを指定します

サンプル03-テーブル表示(外枠有り表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

外枠有りでテーブルを表示します

コーディング
01行目
<table>タグ内で.table-borderedを指定します

サンプル04-テーブル表示(マウスオーバー時の反転表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

テーブルにマウスオーバーした時、カーソル位置の行が反転表示されます

コーディング
01行目
<table>内で.table-hoverを指定します

サンプル05-テーブル表示(圧縮表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

行の高さが低くなり、縦方向が圧縮された表示となります

コーディング
01行目
<table>内で.table-condensedを指定します

サンプル06-テーブル表示(色指定表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

テーブルの行及びセルに色を指定出来ます
同じ行に対して同時に色指定をする事も可能です

コーディング
06行目
<tr>内で色指定すると、行指定となります
07行目
<tr/td>内で色指定すると、行・セル指定となります
08行目
<td>内で色指定すると、セル指定となります

サンプル07-テーブル表示(レスポンシブ表示)

#ユーザー名
1山田太郎@yamada
2山本一郎@yamamoto_i
3山本三郎@yamamoto_s
機能

ブラウザ幅が768pxより小さい場合で表が見切れる場合、スクロールバーが表示されます
※ブラウザの幅を変更して確認してみてください

コーディング
01行目
.table-responsive<table>を囲みます