実現したいこと
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の想定です。
補足
特になし

回答2件
あなたの回答
tips
プレビュー