テーブル レスポンシブ
2021-07-01
参考サイト:https://webst8.com/blog/bootstrap4-table-howto/
1行目のtrがthになる場合、1行の内にtdが複数入る場合などによく使います。
テキストの折り返しをしない場合によく使う基本形はこれです。
| 項目 | 詳細テキストテキスト |
|---|---|
| 項目 | 詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト |
|
1 2 3 4 5 6 7 8 9 |
<div class="table-responsive"> <table class="table text-nowrap table-bordered"> <tr><th>項目</th><td>詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> </table> </div> |
以下では、レスポンシブのときよく使うオプションクラスを説明します。
「table」クラスを「table-responsive」で囲む
tableクラスに「text-nowrap」を指定することでtable全体のセルで折り返しをしない状態になる。
| コース名 | コース詳細 |
|---|---|
| ライトコース | 26時間のライトコースです。26時間のライトコースです。 |
| スタンダードコース | 48時間のスタンダードコースです。48時間のスタンダードコースです。 |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="table-responsive"> <table class="table text-nowrap"> <tr> <th>コース名</th> <th>コース詳細</th> </tr> <tr><td>ライトコース</td><td>26時間のライトコースです。26時間のライトコースです。</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr> </table> </div> |
table特定のセルに「text-nowrap」を指定すると行の折り返しが無くなる
2行目に「text-nowrap」を指定を指定しています。
全体を「text-nowrap」で囲むと、横のスクロールが長くなりすぎる場合、テーブル全体のセルの中で横スクロールするのにちょうどいいくらいの長さのセルに「text-nowrap」を指定した方が良いです。
| コース名 | コース詳細 |
|---|---|
| 折り返さない | 折り返さない折り返さない折り返さない |
| スタンダードコース | 48時間のスタンダードコースです。48時間のスタンダードコースです。 |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="table-responsive"> <table class="table"> <tr> <th>コース名</th> <th>コース詳細</th> </tr> <tr><td class="text-nowrap">折り返さない</td><td class="text-nowrap">折り返さない折り返さない折り返さない</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr> </table> </div> |
ブレークポイントを設けたレスポンシブtable
「table-responsive-sm」「table-responsive-md」「table-responsive-lg」「table-responsive-xl」と
スクロールさせたい画面サイズのやつをつける。
「table-responsive-sm」575px以下でスクロール
「table-responsive-md」767px以下でスクロール
「table-responsive-lg」991px以下でスクロール
「table-responsive-xl」1199px以下でスクロール
| コース名 | コース詳細 |
|---|---|
| ライトコース | 26時間のライトコースです。26時間のライトコースです。 |
| スタンダードコース | 48時間のスタンダードコースです。48時間のスタンダードコースです。 |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="table-responsive-xl"> <table class="table text-nowrap"> <tr> <th>コース名</th> <th>コース詳細</th> </tr> <tr><td>ライトコース</td><td>26時間のライトコースです。26時間のライトコースです。</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr> </table> </div> |
