tableのレスポンシブについて

以前も似たような質問をして回答をいただいたのですが、
それでも再現できなかったので、状態を詳細にしましたので
今一度質問させてください。

前提・実現したいこと

https://jsfiddle.net/6fao70h4/28/
上記のようなtableのレスポンシブを実現したいです。

発生している問題・エラーメッセージ

block要素にしての並び替えや、
table-cellなど試しましたが、
崩れてしまったり思ったような順番になりませんでした。

該当のソースコード

上記URLの参照をお願いします。

ご教示のほどよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

レスポンシブだということなのにご提示のソースはPC用とSP用で別々のソースになっていたので、
同じHTMLで実現できるようにちょっと改造させてもらいましたが、一応できました。
サイズの指定やborderの調整などは実際に作りたいデザインに合わせて別途整える必要はあると思いますが、
基本的に@mediaの中で各要素をdisplay:blockにした上でレイアウトすれば何とかなるのではないか？
という気がします。

ただし、サンプルのソースだとtd,thにheightが指定されているので、
もしここが高さ可変だと、破綻するやもしれません。

HTML
1<table>
2  <tr>
3    <td rowspan="2" class="cell01"></td>
4    <td class="cell02"></td>
5    <td class="cell02"></td>
6  </tr>
7  <tr>
8    <td class="cell03"></td>
9    <td class="cell03"></td>
10  </tr>
11  <tr>
12    <td colspan="2"></td>
13    <td></td>
14  </tr>
15  <tr>
16    <td colspan="2"></td>
17    <td></td>
18  </tr>
19  <tr>
20    <td colspan="2"></td>
21    <td></td>
22  </tr>
23  <tr>
24    <td colspan="2"></td>
25    <td></td>
26  </tr>
27</table>

CSS
1table , td, th {
2	border: 1px solid #595959;
3	border-collapse: collapse;
4}
5	
6table {
7	width: 74px;
8	margin:50px;
9}
10	
11td, th {
12	padding: 3px;
13	width: 30px;
14	height: 25px;
15}
16	
17.cell01 {
18	background: #E53D00;
19}
20	
21.cell02 {
22	background: #FFE900;
23}
24	
25.cell03 {
26	background: #21A0A0;
27}
28
29@media screen and (max-width: 640px) {
30	table {
31		border: none;
32		border-bottom: 1px solid #595959;
33	}
34	td,th {
35		border-bottom: none;
36	}
37	tr {
38		display: block;
39		overflow: hidden;
40		width: 74px;
41	}
42	td {
43		display: block;
44		width: 100%;
45		box-sizing: border-box;
46	}
47	.cell02,
48	.cell03 {
49		float: left;
50		display: block;
51		width: 50%;
52		box-sizing: border-box;
53	}
54	.cell02+.cell02,
55	.cell03+.cell03 {
56		border-left: none;
57	}
58}