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>を囲みます