Bootstrapを使用したレスポンシブ対応したテーブルの表示の仕方について

Question

Bootstrapを使用して、レスポンシブ対応のテーブルを作成を考えております。

PC画面では、画像上側のような3列のテーブルとして表示し、スマホのような小さい画面では、画像下のように、
各列が縦に並ぶようにしたいのですが、うまくいきません。
これをBootstrapを使用して、表示するにはどのようにしたらよいでしょうか？

よろしくお願い致します。

Comments

[m.ts10806]

>うまくいきません。
では何も伝わらないので、実際に組んだコード調べたこと、現在の結果、具体的に記載してください。

[akashi-seijuro]

ご指摘ありがとうございます。
指摘していただいた部分を、もう少し具体的な補足を追加します。

[45_Shingo]

Bootstrapには「table-responsive」というclassを設定することでレスポンシブ対応（特定サイズ以下になるとスクロール可能になる）になるというクラスが用意されていますが、こういう形ではなく、テーブルという構造自体を全部バラして、縦に並べたい…って事でしょうか。

[akashi-seijuro]

45_shingoさん
ありがとうございます。
はい、おっしゃられたようにしたいです。

[dit.]

Bootstrapのクラス指定だけで実現したいのですか？
メディアクエリを利用してご自身でCSSを記述することは考えていませんか？

[akashi-seijuro]

ditさん

回答ありがとうございます。
メディアクエリの使用を使用せずに、実装したいと考えておりました。
また、質問しましたら、回答をお願いしたいです。
よろしくお願い致します。

Answer 1

こういうことでしょうか？
サンプル

.table td{
  display: block;
}

Comments

[akashi-seijuro]

Lhankor_Mhyさん

ありがとうございます。
はい。スマホサイズの画面では、各セルのdisplayプロパティの値をblockにし、画面幅いっぱいにして、
PC画面では、テーブル表示に戻したいです。

説明不足で大変もうしわけありません。
よろしくお願い致します。

[Lhankor_Mhy]

回答のとおりで問題ないかと思うのですが、まだご不明の点がありますか？

[akashi-seijuro]

いえ、大丈夫です！
お忙しい中、ありがとうございました。
また質問したら、ぜひ回答をお願いします！