回答編集履歴
2
typo
test
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
上記動作で問題ないならmatchMedia
|
|
33
|
-
```javacript
|
|
33
|
+
```javascript
|
|
34
34
|
<script>
|
|
35
35
|
window.addEventListener('resize', ()=>{
|
|
36
36
|
const flg_1=t1.querySelector('th ~ td')!==null;
|
1
tuiki
test
CHANGED
|
@@ -28,3 +28,33 @@
|
|
|
28
28
|
</tbody>
|
|
29
29
|
</table>
|
|
30
30
|
```
|
|
31
|
+
|
|
32
|
+
上記動作で問題ないならmatchMedia
|
|
33
|
+
```javacript
|
|
34
|
+
<script>
|
|
35
|
+
window.addEventListener('resize', ()=>{
|
|
36
|
+
const flg_1=t1.querySelector('th ~ td')!==null;
|
|
37
|
+
const flg_2=window.matchMedia( "(min-width: 599px)" ).matches;
|
|
38
|
+
if (flg_1 && !flg_2) {
|
|
39
|
+
t1.querySelectorAll('th ~ td').forEach(td=>{
|
|
40
|
+
const tr=document.createElement('tr');
|
|
41
|
+
td.closest('tr').after(tr);
|
|
42
|
+
tr.appendChild(td);
|
|
43
|
+
});
|
|
44
|
+
}else if(!flg_1 && flg_2){
|
|
45
|
+
t1.querySelectorAll('td').forEach(td=>{
|
|
46
|
+
const tr=td.closest('tr');
|
|
47
|
+
tr.previousElementSibling.appendChild(td);
|
|
48
|
+
tr.remove();
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
53
|
+
<table border>
|
|
54
|
+
<tbody id="t1">
|
|
55
|
+
<tr><th>所在地</th><td>東京都千代田区千代田３－３－３ 千代田ビル３F</td></tr>
|
|
56
|
+
<tr><th>電話番号</th><td><a href="tel:03-3333-3333">03-3333-3333</a></td></tr>
|
|
57
|
+
<tr><th>コメント</th><td>ほげほげほげほげほげほげほげほげほげほげほげほげ</td></tr>
|
|
58
|
+
</tbody>
|
|
59
|
+
</table>
|
|
60
|
+
```
|