teratail header banner
teratail header banner
質問するログイン新規登録

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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

264閲覧

CSSのみを使ったtableでの、iOSでの表示崩れについて

netuser

総合スコア7

iOS

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

1グッド

0クリップ

投稿2025/06/18 08:08

編集2025/06/18 18:44

1

0

実現したいこと

table上部(表頭)の部分の文字を縦書き表示にして、一定の表示の長さになったら改行をして表示するようなものにしたいと考えています。(画像:good_01,good_02)![イメージ説明]
(https://ddjkaamml8q8x.cloudfront.net/questions/2025-06-18/8dd02a6c-40dc-42bc-af0c-9b64b27d75b8.png)

発生している問題・分からないこと

PCブラウザ(Chrome,Edge,Firefox)、Android端末(Chrome,Edge,Firefox)では想定通りの表示がされるのですが、iOSの実機環境(iPhone、iPad)ではどのブラウザでも表示崩れを起こしてしまいます。(画像:ng_01,ng_02)

google検索やChat-GTPなどによると、どうやら、iOSでのtableの表示方法自体に問題があるようなのですが、どうにかしてこの表示崩れをCSSだけで解決方法がないものかと苦慮しております。

CSSソースの記述、またアドバイスなど頂けましたら幸いです。
何卒よろしくお願いいたします。![イメージ説明]
(https://ddjkaamml8q8x.cloudfront.net/questions/2025-06-18/66f4a76a-a8a4-4213-ad8a-448eff0e2b4a.png)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7</head> 8<body> 9<table class="child-table"> 10<tbody> 11 <tr> 12 <td></td> 13 <td class="fm-x"><span>竜宮</span></td> 14 <td class="fm-x"><span>Bあいいいいいいいいいいいい</span></td> 15 <td class="fm-x"><span>竜宮の乙姫の元結いの切りはずし</span></td> 16 <td class="fm-x"><span>floccinaucinihilipilification</span></td> 17 <td class="fm-x"><span>floccinaucinihilipilification floccinaucinihilipilification</span></td> 18 <td class="fm-x"><span>ぽてとがおいしい ぽてとがおいしい ぽてとがおいしい ぽてとがおいしい ぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしい</span></td> 19 <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> 20 <td class="fm-x"><span>寿限無、寿限無 五劫の擦り切れ 海砂利水魚の 水行末 雲来末 風来末 食う寝る処に住む処 藪ら柑子の藪柑子 パイポパイポパイポのシューリンガンシューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーの長久命の長助</span></td></tr> 21 <tr> 22 <td class="fm-y"><span>1ssssssssssssssss</span></td> 23 <td class="fm-cell">あ</td> 24 <td class="fm-cell">あ</td> 25 <td class="fm-cell">あ</td> 26 <td class="fm-cell">あ</td> 27 <td class="fm-cell">あ</td> 28 <td class="fm-cell">あ</td> 29 <td class="fm-cell">あ</td> 30 <td class="fm-cell">あ</td> 31 </tr> 32</tbody> 33</table> 34</body> 35</html>

CSS

1table.child-table { 2 width:100%; 3 border-collapse:collapse; 4 border:#000 solid 1px; 5} 6 7table.child-table td.fm-x, 8table.child-table td.fm-y{ 9 padding:5px 10 border-collapse:collapse; 11 border:#000 solid 1px; 12 text-align: center; 13} 14 15table.child-table td.fm-x span { 16 writing-mode: vertical-rl; 17 overflow-wrap: break-word !important; 18 word-break: keep-all; 19 text-box-trim: trim-both; 20 text-box-edge: auto; 21 line-height: 1.25; 22 display: block; 23 min-height: 25px; 24 max-height: 210px; 25 margin: 0 auto; 26} 27 28table.child-table td.fm-y span { 29 overflow-wrap: break-word !important; 30 word-break: keep-all; 31 text-box-trim: trim-both; 32 text-box-edge: auto; 33 line-height: 1.25; 34 display: block; 35 min-width: 25px; 36 max-width: 225px; 37} 38 39table.child-table td.fm-cell { 40 padding:5px; 41 border-collapse:collapse; 42 border:#000 solid 1px; 43 text-align: center; 44}

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

table上部(表頭)部分はmax-heightを最大の高さとしていて、それ以上の文字があるときには改行される仕様です。

HTMLの<td class="fm-cell"></td>部は、20x20サイズのラジオボタンで
paddhingは5pxの想定です。

補足

特になし

Lhankor_Mhy👍を押しています

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

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

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

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

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

yambejp

2025/06/18 08:31 編集

提示されたHTMLのクラス設定とCSSがうまく噛み合ってなくてCSSが当たらないみたいですよ それとCSSが途中で切れているっぽくて書かれていないところに問題があるのかもしれません
netuser

2025/06/18 10:33 編集

コメントありがとうございます。CSS及び、質問の内容を修正いたしましたので、 ご確認のほどよろしくお願いいたします。
Lhankor_Mhy

2025/06/19 10:00

Issue は2011年に上がっており、未解決のようです。(内容は微妙に違うようですが) https://bugs.webkit.org/show_bug.cgi?id=65917 --- kchikuさんのご回答のコメントに『tableを用いたHTMLという制約』とありますが、これは、 ・table 要素を用いなくてはならない ・display: table, display: table-row ... などでなくてはならない のどちらでしょうか? 前者であれば、比較的容易にCSSでグリッドレイアウトに変更できるのではないかと思うのですが。
netuser

2025/06/19 10:55 編集

今回もコメントありがとうございます! ご案内いただいたトピックに書かれた内容と同じ現象が起きていて 苦労していました。。。 『tableを用いたHTMLという制約』についてですが 以前に、マウスオーバーをした際に表頭と表側からナビゲートのように背景色をつける。という件で 助けていただいた内容のものへの追加要望になります。 この<制約>というものが、ユーザーの設定の下に生成されたフォームがtableで構成されたものになりまして、私のかかわれる範囲はCSSのみで、いろいろな要望や注文に対して手を変え品を変えながら CSSのみで何とか対応をしているというものなのです。 それで、今回表頭の部分を縦書きにして、長い文字列はユーザーの指定した範囲で改行表示して欲しい。 というものをどうしたものかと、ご質問をさせていただいていた次第です。 Lhankor_Mhy様のおっしゃる通りに、kchikuさまの投稿がヒントにもなって、spanにdisplay:grid、gridには1frを指定することで文字が改行されてもspan幅の確保をすることができ、改行を伴わない長い文字列はoverflow: hidden scrollをすることで、一応の表頭の表示をそれらしく表示することはできました。
guest

回答2

0

spanにdisplay:grid、gridには1frを指定することで文字が改行されてもspan幅の確保をすることができ、改行を伴わない長い文字列はoverflow: hidden scrollをすることで、一応の表頭の表示をそれらしく表示することはできました。

※iOSにのみ問題が作用していたので、hackを当てております。

css

1@supports (-webkit-touch-callout: none) { 2 .fm-matrix td.fm-x { 3 padding: 5px; 4 } 5 6 .fm-matrix td.fm-x span { 7 display:grid; 8 grid-template-columns:1fr; 9 grid-template-rows:1fr; 10 overflow-wrap: anywhere; 11 white-space: pre-wrap; 12 max-height: 250px; 13 overflow: hidden scroll; 14 } 15 }

投稿2025/06/19 10:50

編集2025/06/19 10:51
netuser

総合スコア7

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

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

0

ベストアンサー

safariで縦書きは鬼門ですからね...おそらく縦書き時のコンテンツ幅が正常に取得できないとか、そんな問題だと思います。

ベストな回答じゃないかも知れませんがgridで書いてみたので参考にしてみてください。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <ul class="col"> <li class="row"></li> <li class="fm-x">竜宮</li> <li class="fm-x">Bあいいいいいいいいいいいい</li> <li class="fm-x">竜宮の乙姫の元結いの切りはずし</li> <li class="fm-x">floccinaucinihilipilification</li> <li class="fm-x">floccinaucinihilipilification floccinaucinihilipilification</li> <li class="fm-x">ぽてとがおいしい ぽてとがおいしい ぽてとがおいしい ぽてとがおいしい ぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしいぽてとがおいしい</li> <li class="fm-x">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</li> <li class="fm-x">寿限無、寿限無 五劫の擦り切れ 海砂利水魚の 水行末 雲来末 風来末 食う寝る処に住む処 藪ら柑子の藪柑子 パイポパイポパイポのシューリンガンシューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーの長久命の長助</li> <li class="fm-y">1ssssssssssssssss</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> <li class="fm-cell">あ</li> </ul> </div> <style> *{ box-sizing: border-box; } .col{ display: grid; grid-template-columns: repeat(9,1fr); width: 100%; } ul{ margin: 0; padding: 0; } ul li{ padding: 5px; max-height: 210px; border-width: 1px 0 1px 1px; border-style: solid; border-color: #ccc; list-style-type: none; } ul li:nth-child(-n+9){ border-width: 1px 0 0 1px; } ul li:nth-child(9n){ border-width: 1px 1px 1px 1px; } ul li:nth-child(9){ border-width: 1px 1px 0 1px; } .fm-x{ line-height: 1.25; writing-mode: vertical-rl; } .fm-y{ line-height: 1.25; word-break: keep-all; } .fm-cell{ text-align: center; } </style> </body> </html>

投稿2025/06/18 11:07

kchiku

総合スコア168

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

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

netuser

2025/06/18 14:08

回答ありがとうございます。 本当にiOS下での表示に苦労しております。 SafariだけでなくChromeやEdgeでもダメなので、果たしてどうしたものかと。。。。 ご回答をいただきましたGridを用いての表現、参考になります。 ただ、tableを用いたHTMLという制約がありまして 頂いた内容については代案の検討という形で、提案をするときに使わせていただきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問