質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1232閲覧

iPhone で table の1pxボーダーが薄くなる

asako-

総合スコア21

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/21 15:01

編集2020/10/22 09:48

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 を指定することで回避できたのですが…。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mskRR

2020/10/21 22:14

retinaの倍率×2, ×3あたりの違いでぼやける系の話題があったような。(適当)
miyabi_takatsuk

2020/10/22 01:15

キャプチャ撮って載せて頂くことは可能ですか? iOSのバージョン、iPhoneの機種(解像度の違いを確認したい)、の記載をお願いします。 また、CSSとHTMLコードの記載をお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問