テーブル 色
2021-07-01
参考サイト:https://webst8.com/blog/bootstrap4-table-howto/
「table」クラスに「table-dark」クラスをつけると背景色が黒くなる
| ライトコース | 26時間のライトコースです |
| スタンダードコース | 48時間のスタンダードコースです |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 |
<table class="table table-dark"> <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr> </table> |
bootstrap4で設定されている色を指定
他にcssでth・tdに背景色をつけるようにしているなら効かないかもしれません。
table-{color}を設定することで色を設定（td,thでも可能）
| table-dark | table-light |
|---|---|
| th | table-dangerが効かない（trにつけたクラスが優先される） |
| th | table-active |
| th | table-primary |
| th | table-secondary |
| th | table-success |
| th | table-danger |
| th | table-warning |
| th | table-info |
| th | table-light |
| th | table-dark |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table class="table"> <tr><th class="table-dark">table-dark</th><td class="table-light">table-light</td></tr> <tr class="table-active"><th>th</th><td class="table-danger">table-dangerが効かない（trにつけたクラスが優先される）</td></tr> <tr class="table-active"><th>th</th><td>table-active</td></tr> <tr class="table-primary"><th>th</th><td>table-primary</td></tr> <tr class="table-secondary"><th>th</th><td>table-secondary</td></tr> <tr class="table-success"><th>th</th><td>table-success</td></tr> <tr class="table-danger"><th>th</th><td>table-danger</td></tr> <tr class="table-warning"><th>th</th><td>table-warning</td></tr> <tr class="table-info"><th>th</th><td>table-info</td></tr> <tr class="table-light"><th>th</th><td>table-light</td></tr> <tr class="table-dark"><th>th</th><td>table-dark</td></tr> </table> |
bg-{color}を設定することで鮮やかな色を設定（td,thでも可能）
| bg-dark | bg-light |
|---|---|
| td | bg-primary |
| th | bg-secondary |
| th | bg-success |
| th | bg-danger |
| th | bg-warning |
| th | bg-info |
| th | bg-light |
| th | bg-dark |
|
1 2 3 4 5 6 7 8 9 10 11 |
<table class="table"> <tr><th class="bg-dark">bg-dark</th><td class="bg-light">bg-light</td></tr> <tr class="bg-primary"><td>td</td><td>bg-primary</td></tr> <tr class="bg-secondary"><th>th</th><td>bg-secondary</td></tr> <tr class="bg-success"><th>th</th><td>bg-success</td></tr> <tr class="bg-danger"><th>th</th><td>bg-danger</td></tr> <tr class="bg-warning"><th>th</th><td>bg-warning</td></tr> <tr class="bg-info"><th>th</th><td>bg-info</td></tr> <tr class="bg-light"><th>th</th><td>bg-light</td></tr> <tr class="bg-dark"><th>th</th><td>bg-dark</td></tr> </table> |
