Bootstrapのテーブルカラムをスクリーン幅で出し分ける方法

Question

###前提・実現したいこと
Bootstrapのグリッドシステムにある表示／非表示機能をテーブルに活用する方法が知りたい。

###発生している問題・エラーメッセージ
thタグのクラスに「hidden-sm」のような指定をしてみたが、うまく消えてくれない。
そもそもテーブルには使えないクラスなのか？

###該当のソースコード

<div class="table-responsive">
  <table class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th class="col-md-1">A</th>
        <th class="col-md-5">B</th>
        <th class="col-md-3 hidden-sm hidden-xs">C</th>
        <th class="col-md-2 hidden-sm">D</th>

      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td>
      </tr>
    </tbody>
  </table>
</div>

スマホなど小さい画面になった時に、いくつか列を非表示にしたいのですが、他によい方法はないでしょうか？

Comments

[kei344]

Bootstrapのバージョンは3系ですか？4系ですか？

[tuckQ]

3系を使用しております。

Answer 1

<th>は単なる1セルですので、<th>を消しても他の<td>には影響しません。

消したい<td>にも適切なクラスをかけていく必要があります（<col>をdisplay:noneにすると<col>自体が無効になるだけで、あまり役に立ちません）。

Comments

[tuckQ]

補足情報いただきありがとうございました。＋αの知識がつきました！

Answer 2

td にもつける必要があります。

Comments

[tuckQ]

試したところうまくいきました！ありがとうございました。