tableをレスポンシブ対応にしたい

Question

前提・実現したいこと

tableをレスポンシブ対応にしたいのですが、プラグインなどで簡単にできることは理解しました。
しかし、項目に内訳などがあるとうまくいかず、どのようにすればよいのかがわかりません。
Basic Tableなどのプラグインを利用すると<td>平日</td><td>土日祝日</td>部分がすべて

<td colspan="2">通常営業時間</td>の表示になってしまいます。

tableのPC表示版とモバイル表示版を準備して、表示非表示で対応するしかないのでしょうか。

### 該当のソースコード
        <table id="example">
			<thead>
				<tr>
			<td rowspan="2">お店の名前</td>
			<td colspan="2">通常営業時間</td>
			<td colspan="2">変更営業時間</td>	
			<td rowspan="2">変更開始日</td></tr>
			<tr>
			<td>平日</td>
			<td>土日祝日</td>
			<td>平日</td>
			<td>土日祝日</td></tr></thead>	
		<tbody>
			<tr>
			<td class="shop">○○店</td>
			<td>9:00-18:00</td>
			<td>8:00-19:00</td>
			<td>9:00-22:00</td>
			<td>9:00-16:00</td>
			<td>1/1</td>
		</tr>
　　　　　　　　</tbody>

PC表示
![イメージ説明](f7a529007e92c4bf8e2a60ec0d44d3b9.png)
モバイル表示
![イメージ説明](88d8597a54a59e0d8725ad94d3cce95d.png)

こんな風にしたいのですが…

Answer 1

テーブルはやめて全部divで組んで、widthを元に構造も組み替えるとよいでしょう

Comments

[退会済みユーザー]

ご回答ありがとうございました！とてもうれしかったです。

Answer 2

モバイル表示の時は、セルを display: block; でブロック要素にして、あとは float や flex でレイアウトを決めるという手法があります。例えば、

もう悩まない。CSSでレスポンシブなtableデザイン＆コーディング – 東京のホームページ制作 / WEB制作会社 BRISK

CSSで見出し固定＋レスポンシブ対応の表を作成 | Webクリエイターボックス

しかし、今回のようにセル結合があるとかなり難しそうです。ちょっと考えてみましたが、あきらめました。

テーブルをあきらめれば、CSS Grid を使うと簡単に実現できます。

CSS Grid Layout を極める！（基礎編） - Qiita

IE11が面倒ですが、Autoprefixer を使えば IE11対応に変換してくれます。
あるいは、下記のようなオンラインサービスを使ってもいいでしょう。

Autoprefixer CSS online

Gridを使ったサンプルを作成してみましたのでご参考に。
CodePenサンプル

Comments

[退会済みユーザー]

私は未経験者で質問のような表はtableで作成するものだという前提で何の迷いもなく使っていたので
Gridを使ったサンプルをみておどろきました…。また、とても丁寧に教えて下さってすごくうれしかったです！ありがとうございました！！　早速やり直してみます。

[退会済みユーザー]

申し訳ございません。
もう一度質問させてください。
私が張り付けた画像に誤りがありました。
CodePenサンプルを参考にやり直してみたのですが、①情報量が多く（お店の件数が多い）、更にお店の件数が増減していく②PC版とは項目が変わっている部分がある「お店の名前」はモバイル版ではなくなり、実際にはその場所に具体的なお店の名前「○○店」がはいります。以上の2点からCSS Gridでも不可能という結論に達したのですが、解決策はありそうでしょうか。