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

実現したいこと

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>Ｂあいいいいいいいいいいいい</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>1ｓｓｓｓｓｓｓｓｓｓｓｓｓｓｓｓ</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の想定です。

補足

特になし

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をすることで、一応の表頭の表示をそれらしく表示することはできました。

行動規範の内容に同意します

回答2件

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

ベストアンサー

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">Ｂあいいいいいいいいいいいい</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">1ｓｓｓｓｓｓｓｓｓｓｓｓｓｓｓｓ</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

総合スコア170

netuser

2025/06/18 14:08

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

行動規範の内容に同意します

あなたの回答