質問編集履歴

1

コード、スクショの追加

2020/10/22 09:48

投稿

asako-
asako-

スコア21

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,197 @@
3
3
  これはiosのバグなのでしょうか?
4
4
 
5
5
  解決法があれば教えていただけるとありがたいです。
6
+
7
+
8
+
9
+
10
+
11
+ ![イメージ説明](adce939edc600ff1f31778f7a3b7d170.png)
12
+
13
+
14
+
15
+ ```HTML
16
+
17
+ <figure class="wp-block-table c-table-frame m-table-scroll">
18
+
19
+ <table class="has-fixed-layout">
20
+
21
+ <thead>
22
+
23
+ <tr>
24
+
25
+ <th>見出し</th>
26
+
27
+ <th>見出し</th>
28
+
29
+ <th>見出し</th>
30
+
31
+ <th>見出し</th>
32
+
33
+ <th>見出し</th>
34
+
35
+ <th>見出し</th>
36
+
37
+ </tr>
38
+
39
+ </thead>
40
+
41
+ <tbody>
42
+
43
+ <tr>
44
+
45
+ <td>2時間</td>
46
+
47
+ <td>7,000円〜</td>
48
+
49
+ <td>5,000円〜</td>
50
+
51
+ <td>6,000円〜</td>
52
+
53
+ <td rowspan="7">500円〜</td>
54
+
55
+ <td rowspan="7">5,000円〜</td>
56
+
57
+ </tr>
58
+
59
+ <tr>
60
+
61
+ <td>3時間</td>
62
+
63
+ <td>8,000円〜</td>
64
+
65
+ <td>7,000円〜</td>
66
+
67
+ <td>7,000円〜</td>
68
+
69
+ </tr>
70
+
71
+ <tr>
72
+
73
+ <td>4時間</td>
74
+
75
+ <td>9,000円〜</td>
76
+
77
+ <td>9,000円〜</td>
78
+
79
+ <td>8,000円〜</td>
80
+
81
+ </tr>
82
+
83
+ <tr>
84
+
85
+ <td>5時間</td>
86
+
87
+ <td>10,000円〜</td>
88
+
89
+ <td>11,000円〜</td>
90
+
91
+ <td>9,000円〜</td>
92
+
93
+ </tr>
94
+
95
+ <tr>
96
+
97
+ <td>6時間</td>
98
+
99
+ <td>11,000円〜</td>
100
+
101
+ <td>13,000円〜</td>
102
+
103
+ <td>10,000円〜</td>
104
+
105
+ </tr>
106
+
107
+ <tr>
108
+
109
+ <td>7時間</td>
110
+
111
+ <td>12,000円〜</td>
112
+
113
+ <td>15,000円〜</td>
114
+
115
+ <td>11,000円〜</td>
116
+
117
+ </tr>
118
+
119
+ <tr>
120
+
121
+ <td>8時間</td>
122
+
123
+ <td>13,000円〜</td>
124
+
125
+ <td>17,000円〜</td>
126
+
127
+ <td>12,000円〜</td>
128
+
129
+ </tr>
130
+
131
+ </tbody>
132
+
133
+ </table>
134
+
135
+ </figure>
136
+
137
+ ```
138
+
139
+
140
+
141
+ ```css
142
+
143
+ table {
144
+
145
+ border-collapse: collapse;
146
+
147
+ }
148
+
149
+ .wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th {
150
+
151
+ word-break: break-word;
152
+
153
+ }
154
+
155
+ .c-table-frame.m-table-scroll {
156
+
157
+ overflow-x: auto;
158
+
159
+ white-space: nowrap;
160
+
161
+ font-size: 0.94em;
162
+
163
+ }
164
+
165
+ .c-table-frame.m-table-scroll table {
166
+
167
+ table-layout: auto;
168
+
169
+ width: 100%;
170
+
171
+ }
172
+
173
+ .c-table-frame td, .c-table-frame th {
174
+
175
+ border: 1px solid #7f7f7f;
176
+
177
+ padding: 0.5em 1em;
178
+
179
+ }
180
+
181
+ ```
182
+
183
+
184
+
185
+
186
+
187
+ 確認環境は以下です。
188
+
189
+ iOS 14.1
190
+
191
+ iPhone Xs
192
+
193
+
194
+
195
+ 【補足】
196
+
197
+ ・表内のフォントサイズを変更すると、サイズにより解消される場合があります。また、td, thのpaddingを変更した場合も数値により解消されたりします。
198
+
199
+ ・以前にもiPhoneで、画像に隣接するボーダーで同様の現象があり、その際はimgタグに display: block を指定することで回避できたのですが…。