質問編集履歴
3
HTMLの編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,6 +16,14 @@
|
|
|
16
16
|
### 該当のソースコード
|
|
17
17
|
|
|
18
18
|
```HTML
|
|
19
|
+
<!DOCTYPE html>
|
|
20
|
+
<html lang="ja">
|
|
21
|
+
<head>
|
|
22
|
+
<meta charset="UTF-8">
|
|
23
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
24
|
+
<title>Document</title>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
19
27
|
<table class="child-table">
|
|
20
28
|
<tbody>
|
|
21
29
|
<tr>
|
|
@@ -38,10 +46,11 @@
|
|
|
38
46
|
<td class="fm-cell">あ</td>
|
|
39
47
|
<td class="fm-cell">あ</td>
|
|
40
48
|
<td class="fm-cell">あ</td>
|
|
41
|
-
<td class="fm-cell">あ</td>
|
|
42
49
|
</tr>
|
|
43
50
|
</tbody>
|
|
44
51
|
</table>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
45
54
|
```
|
|
46
55
|
|
|
47
56
|
```CSS
|
2
CSSの修正と質問文の編集を行いました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
(https://ddjkaamml8q8x.cloudfront.net/questions/2025-06-18/8dd02a6c-40dc-42bc-af0c-9b64b27d75b8.png)
|
|
4
4
|
|
|
5
5
|
### 発生している問題・分からないこと
|
|
6
|
-
PCブラウザ（Chrome,Edge,Firefox）、Android端末（Chrome,Edge,Firefox）では想定通りの表示がされるのですが、iOS環境ではどのブラウザでも表示崩れを起こしてしまいます。（画像：ng_01,ng_02）
|
|
6
|
+
PCブラウザ（Chrome,Edge,Firefox）、Android端末（Chrome,Edge,Firefox）では想定通りの表示がされるのですが、iOSの実機環境（iPhone、iPad）ではどのブラウザでも表示崩れを起こしてしまいます。（画像：ng_01,ng_02）
|
|
7
7
|
|
|
8
8
|
google検索やChat-GTPなどによると、どうやら、iOSでのtableの表示方法自体に問題があるようなのですが、どうにかしてこの表示崩れをCSSだけで解決方法がないものかと苦慮しております。
|
|
9
9
|
|
|
@@ -47,11 +47,16 @@
|
|
|
47
47
|
```CSS
|
|
48
48
|
table.child-table {
|
|
49
49
|
width:100%;
|
|
50
|
+
border-collapse:collapse;
|
|
51
|
+
border:#000 solid 1px;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
54
|
table.child-table td.fm-x,
|
|
53
55
|
table.child-table td.fm-y{
|
|
54
56
|
padding:5px
|
|
57
|
+
border-collapse:collapse;
|
|
58
|
+
border:#000 solid 1px;
|
|
59
|
+
text-align: center;
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
table.child-table td.fm-x span {
|
|
@@ -64,6 +69,7 @@
|
|
|
64
69
|
display: block;
|
|
65
70
|
min-height: 25px;
|
|
66
71
|
max-height: 210px;
|
|
72
|
+
margin: 0 auto;
|
|
67
73
|
}
|
|
68
74
|
|
|
69
75
|
table.child-table td.fm-y span {
|
|
@@ -79,6 +85,9 @@
|
|
|
79
85
|
|
|
80
86
|
table.child-table td.fm-cell {
|
|
81
87
|
padding:5px;
|
|
88
|
+
border-collapse:collapse;
|
|
89
|
+
border:#000 solid 1px;
|
|
90
|
+
text-align: center;
|
|
82
91
|
}
|
|
83
92
|
```
|
|
84
93
|
|
1
HTMLとCSSの誤字部分の修正を行いました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,31 +17,31 @@
|
|
|
17
17
|
|
|
18
18
|
```HTML
|
|
19
19
|
<table class="child-table">
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
<tbody>
|
|
21
|
+
<tr>
|
|
22
|
+
<td></td>
|
|
23
|
+
<td class="fm-x"><span>竜宮</span></td>
|
|
24
|
+
<td class="fm-x"><span>Ｂあいいいいいいいいいいいい</span></td>
|
|
25
|
+
<td class="fm-x"><span>竜宮の乙姫の元結いの切りはずし</span></td>
|
|
26
|
+
<td class="fm-x"><span>floccinaucinihilipilification</span></td>
|
|
27
|
+
<td class="fm-x"><span>floccinaucinihilipilification floccinaucinihilipilification</span></td>
|
|
28
|
+
<td class="fm-x"><span>ぽてとがおいしい ぽてとがおいしい ぽてとがおいしい ぽてとがおいしい ぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしい</span></td>
|
|
29
|
+
<td class="fm-x"><span>floccinaucinihilipilification aaa book is strengers dangerous floccinaucinihilipilification aaa book is strengers dangerous floccinaucinihilipilification aaa book is strengers dangerous floccinaucinihilipilification aaa book is strengers dangerous floccinaucinihilipilification aaa book is strengers dangerous floccinaucinihilipilification aaa book is strengers dangerous</span></td>
|
|
30
|
+
<td class="fm-x"><span>寿限無、寿限無 五劫の擦り切れ 海砂利水魚の 水行末 雲来末 風来末 食う寝る処に住む処 藪ら柑子の藪柑子 パイポパイポパイポのシューリンガンシューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーの長久命の長助</span></td></tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<td class="fm-y"><span>1ｓｓｓｓｓｓｓｓｓｓｓｓｓｓｓｓ</span></td>
|
|
33
|
+
<td class="fm-cell">あ</td>
|
|
34
|
+
<td class="fm-cell">あ</td>
|
|
35
|
+
<td class="fm-cell">あ</td>
|
|
36
|
+
<td class="fm-cell">あ</td>
|
|
37
|
+
<td class="fm-cell">あ</td>
|
|
38
|
+
<td class="fm-cell">あ</td>
|
|
39
|
+
<td class="fm-cell">あ</td>
|
|
40
|
+
<td class="fm-cell">あ</td>
|
|
41
|
+
<td class="fm-cell">あ</td>
|
|
42
|
+
</tr>
|
|
43
|
+
</tbody>
|
|
44
|
+
</table>
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
```CSS
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
width:100%;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
table.child-table td.
|
|
52
|
+
table.child-table td.fm-x,
|
|
53
|
-
table.child-table td.
|
|
53
|
+
table.child-table td.fm-y{
|
|
54
54
|
padding:5px
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
table.child-table td.
|
|
57
|
+
table.child-table td.fm-x span {
|
|
58
58
|
writing-mode: vertical-rl;
|
|
59
59
|
overflow-wrap: break-word !important;
|
|
60
60
|
word-break: keep-all;
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
max-height: 210px;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
table.child-table td.
|
|
69
|
+
table.child-table td.fm-y span {
|
|
70
70
|
overflow-wrap: break-word !important;
|
|
71
71
|
word-break: keep-all;
|
|
72
72
|
text-box-trim: trim-both;
|
|
@@ -77,8 +77,9 @@
|
|
|
77
77
|
max-width: 225px;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
table.child-table td.
|
|
80
|
+
table.child-table td.fm-cell {
|
|
81
81
|
padding:5px;
|
|
82
|
+
}
|
|
82
83
|
```
|
|
83
84
|
|
|
84
85
|
### 試したこと・調べたこと
|