niki12260714の日記

フリーランスのITエンジニアの呟き。

Bootstrap4で、スマホサイズの時に、Tableの特定カラムを非表示にする

Bootstrap4から、「このサイズの時は非表示」を示す「hidden-**」は廃止されました。

webnetamemo.com

なので、スマホサイズの時に非表示は「<p class="d-none d-sm-block">」のように書くことになります。

さて、これをこのままTableに適用すると、PCサイズの時に非表示に指定したカラムが縦に積まれて画面レイアウトが崩れます。
調べたら、Tableに適用する場合のコードは以下でした。

<table class="table table-hover align-items-center">
 <thead>
  <tr>
   <th scope="col">常に表示</th>
   <th scope="col" class="d-none d-sm-table-cell">スマホ非表示</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>表示中身</td>
   <td class="d-none d-sm-table-cell">非表示中身</td>
  </tr>
 <tbody>
</tbody>