table の th, td に指定している1pxボーダーがiPhoneで見ると薄くなる箇所があります。
これはiosのバグなのでしょうか?
解決法があれば教えていただけるとありがたいです。
HTML
1<figure class="wp-block-table c-table-frame m-table-scroll"> 2 <table class="has-fixed-layout"> 3 <thead> 4 <tr> 5 <th>見出し</th> 6 <th>見出し</th> 7 <th>見出し</th> 8 <th>見出し</th> 9 <th>見出し</th> 10 <th>見出し</th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td>2時間</td> 16 <td>7,000円〜</td> 17 <td>5,000円〜</td> 18 <td>6,000円〜</td> 19 <td rowspan="7">500円〜</td> 20 <td rowspan="7">5,000円〜</td> 21 </tr> 22 <tr> 23 <td>3時間</td> 24 <td>8,000円〜</td> 25 <td>7,000円〜</td> 26 <td>7,000円〜</td> 27 </tr> 28 <tr> 29 <td>4時間</td> 30 <td>9,000円〜</td> 31 <td>9,000円〜</td> 32 <td>8,000円〜</td> 33 </tr> 34 <tr> 35 <td>5時間</td> 36 <td>10,000円〜</td> 37 <td>11,000円〜</td> 38 <td>9,000円〜</td> 39 </tr> 40 <tr> 41 <td>6時間</td> 42 <td>11,000円〜</td> 43 <td>13,000円〜</td> 44 <td>10,000円〜</td> 45 </tr> 46 <tr> 47 <td>7時間</td> 48 <td>12,000円〜</td> 49 <td>15,000円〜</td> 50 <td>11,000円〜</td> 51 </tr> 52 <tr> 53 <td>8時間</td> 54 <td>13,000円〜</td> 55 <td>17,000円〜</td> 56 <td>12,000円〜</td> 57 </tr> 58 </tbody> 59 </table> 60</figure>
css
1table { 2 border-collapse: collapse; 3} 4.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th { 5 word-break: break-word; 6} 7.c-table-frame.m-table-scroll { 8 overflow-x: auto; 9 white-space: nowrap; 10 font-size: 0.94em; 11} 12.c-table-frame.m-table-scroll table { 13 table-layout: auto; 14 width: 100%; 15} 16.c-table-frame td, .c-table-frame th { 17 border: 1px solid #7f7f7f; 18 padding: 0.5em 1em; 19}
確認環境は以下です。
iOS 14.1
iPhone Xs
【補足】
・表内のフォントサイズを変更すると、サイズにより解消される場合があります。また、td, thのpaddingを変更した場合も数値により解消されたりします。
・以前にもiPhoneで、画像に隣接するボーダーで同様の現象があり、その際はimgタグに display: block を指定することで回避できたのですが…。
あなたの回答
tips
プレビュー