縦書きにするCSS「writing-mode」がスマホで効かないのを解決したい

Question

前提・実現したいこと

縦書きにするCSS「writing-mode」がスマホで効かないのを解決したい

##発生している問題・エラーメッセージ
tableの作成で縦書きにするCSSの「writing-mode: vertical-rl;」を使用しましたが、
PCでは縦書きで表示されているのに、実機のiPhoneで表示すると表記が横向きになってしまっています。

何か対処法はありますでしょうか？

##該当のソースコード

＜html＞

 <table class="table01">
     <thead>
       <tr>
         <th class="color01" colspan="2"></th>
         <th class="color01 Blue">テキスト</th>
         <th class="color02">テキスト</th>
         <th class="color02">テキスト</th>
         <th class="color02">テキスト</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <th class="Blue" rowspan="2" colspan="2" ><span class="tate">テキスト</span></th>
            <td class="Blue font">テキスト</td>
            <td class="font">テキスト</td>
            <td class="font">テキスト</td>
            <td class="font">テキスト</td>
         </tr>
         <tr>
           <td class="Blue"><div class="left">テキスト</div></td>
           <td>テキスト</td>
           <td>テキスト</td>
           <td>テキスト</td>
        </tr>
        <tr>
         　<th class="Blue" rowspan="2" colspan="2" ><span class="tate">テキスト</span></th>
            <td class="Blue font">◎</td>
            <td class="font">△</td>
            <td class="font">△</td>
            <td class="font">〇</td>
        </tr>
        <tr>
        　 <td class="Blue"><div class="left">テキスト</div></td>
           <td>テキスト</td>
           <td>テキスト</td>
           <td>テキスト</td>
        </tr>
        <tr>
          <th class="Blue rowgroup01" rowspan="3" scope="rowgroup"><span class="tate">テキスト</span></th>
          <th class="Blue rowgroup" scope="row"><span class="tate">テキスト</span></th>
          <td class="Blue font">〇</td>
          <td class="font">×</td>
          <td class="font">〇</td>
          <td class="font">〇</td>
        </tr>
        <tr>
           <th class="Blue rowgroup" scope="row"><span class="tate">テキスト</span></th>
            <td class="Blue font">〇</td>
            <td class="font">〇</td>
            <td class="font">×</td>
            <td class="font">×</td>
         </tr>
         <tr>
         　　<th class="Blue rowgroup" scope="row"><span class="tate">テキスト</span></th>
             <td class="Blue font">〇</td>
             <td class="font">×</td>
             <td class="font">×</td>
             <td class="font">〇</td>
          </tr>
          <tr>
            <th class="Blue pdg" colspan="2" ><span class="tate">テキスト</span></th>
              <td class="Blue">テキスト</td>
              <td>テキスト</td>
              <td>テキスト</td>
              <td>テキスト</td>
          </tr>
          <tr>
              <th class="Blue rowgroup01" rowspan="3" scope="rowgroup"><span class="tate">テキスト</span></th>
              <th class="Blue rowgroup" scope="row"><span class="tate">テキスト</span></th>
              <td class="Blue">テキスト</td>
              <td class="font">×</td>
              <td>テキスト</td>
              <td>テキスト</td>
           </tr>
           <tr>
             　<th class="Blue rowgroup" scope="row"><span class="tate">テキスト</span></th>
               <td class="Blue">テキスト</td>
               <td>テキスト</td>
               <td class="font">テキスト</td>
               <td class="font">テキスト</td>
            </tr>
            <tr>
                <th class="Blue rowgroup" scope="row">
　　　　　　　　　　<span class="tate">テキスト</span>
　　　　　　　　</th>
                <td class="Blue">テキスト</td>
                <td class="font">テキスト</td>
                <td class="font">テキスト</td>
                <td>テキスト</td>
            </tr>
         </tbody>
     </table>

＜css＞
.table01 {
    width: 100%;
}
.table01 tbody th {
    font-weight: normal !important;
    text-align: center;
    padding: 2.8em .2em;
    min-height: 3.5em;
}
.table01 td, th {
	padding: 3px;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #595959;
	border-collapse: collapse;
    padding: 1.2em 0;
}
.table01 thead th{
    font-size: 25px;
}
.table01 thead .color01{
    background-color: #F1F8F9;
}
.table01 thead .color02{
    background-color: #F7F7F7;
}

.table01 .tate{
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  letter-spacing: 6px;
}
.table01 .read{
  display: flex;
  text-align: right;
}
.table01 .read p{
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  width: 100%;
}
.table01 .Blue{
    color: #2B60BC;
    font-weight: bold;
}

.table01 .font{
    font-size: 30px;   
}
.table01 .left{
    text-align: left;
    display: inline-block;
    margin: 0 auto;
}
.table01 .rowgroup{
    padding: 1.8em 0;
}
.table01 .rowgroup01{
    padding: 2.8em .5em;
}
.table01 .pdg{
    padding: .625em .2em;
}

Answer 1

iphone12 mini (iOS14)で試してみましたが、きちんと縦書きになっていました。
横書きになっているように見えるのは折り返しが起きているだけだと思いますので、折り返さないようにしてみてはどうでしょうか。

    .table01 .tate {
      white-space: pre;
    }

Comments

[sumaru]

ありがとうございます！
iPhone13で見た時は崩れていたのですが、
white-space: pre;で解決しました！！
ありがとうございます^^

[Lhankor_Mhy]

お役に立てたようで何よりです。

table はレイアウトの仕様が厳密に決まっていないので、ブラウザによって表示が異なることが多いです。
きっちりしたデザインには向いていませんので、あまり期待しない方がいいと思います。