テーブルヘッダー

2021-07-01

参考サイト:https://webst8.com/blog/bootstrap4-table-howto/

「tr>th」を「thead.thead-dark」または「thead.thead-light」で囲む
これを付けているとスマホで要素が画面の外に出てしまうのでレスポンシブのクラスを付けています。

thead-dark

コース名	コース詳細
ライトコース	26時間のライトコースです。26時間のライトコースです。
スタンダードコース	48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース	80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン	単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティング	お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

<div class="table-responsive">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>コース名</th>
        <th>コース詳細</th>
      </tr>
      </thead>
    <tbody>
      <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>
      </tbody>
    </table>
</div>

<tr>

<th>コース詳細</th>

</tr>

</thead>

<tbody>

<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>

</tbody>

</table>

</div>

thead-light

コース名	コース詳細
ライトコース	26時間のライトコースです。26時間のライトコースです。
スタンダードコース	48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース	80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン	単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティング	お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

<div class="table-responsive">
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>コース名</th>
        <th>コース詳細</th>
      </tr>
      </thead>
    <tbody>
      <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>
      </tbody>
    </table>
</div>