writing-mode: vertical-rl移动端不生效问题求助

可能的原因 #

• 表格单元格布局限制：移动端浏览器对table-cell类型元素（如）的writing-mode支持存在兼容性问题，尤其是当元素设置了rowspan时，单元格的布局规则会限制垂直文本的渲染。
• 属性冲突与兼容性：你同时混用了旧版tb-rl和标准vertical-rl属性值，部分移动端浏览器对旧值的解析可能干扰标准值生效；另外transform: rotate(-180deg)与writing-mode结合时，移动端渲染引擎的处理逻辑和桌面端存在差异，导致显示异常。
• 表格宽度适配问题：表格设置固定宽度1280px，移动端会横向缩放表格，挤压垂直文本单元格的空间，使得垂直排版的文本无法正常显示，看起来像是属性不生效。

修复方案 #

1. 用内部容器包裹文本：在内添加块级容器（如<div>），将writing-mode和transform属性移到容器上，规避表格单元格的布局限制：

   <th rowspan="99" scope="col" width="2%">
     <div style="writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; width: 100%; height: 100%;">
       LINE UP (7:40-8:05)
     </div>
   </th>
   

   注：将rotate(-180deg)改为rotate(180deg)，配合vertical-rl的垂直排列逻辑，能让文本方向更符合预期，同时避免旧属性干扰。

2. 统一使用标准属性：移除旧版tb-rl和冗余浏览器前缀（当前主流移动端浏览器已支持标准writing-mode），只保留标准属性：

   writing-mode: vertical-rl;
   transform: rotate(180deg);
   text-align: center;
   

3. 优化表格移动端适配：将表格固定宽度改为min-width: 1280px，配合外层overflow-x: auto，让移动端可横向滚动查看，避免挤压单元格空间：

   <table id="myTable" style="min-width: 1280px;">
   

完整修改后的代码示例 #

<div style="overflow-x: auto; font-size: 13.5px;">
  <table id="myTable" style="min-width: 1280px;">
    <tbody>
      <tr>
        <th style="font-size:10px" scope="col" width="4%"></th>
        <th rowspan="99" scope="col" width="2%">
          <div style="writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; width: 100%; height: 100%;">
            LINE UP (7:40-8:05)
          </div>
        </th>
        <th style="text-align: center; vertical-align: middle;" scope="col" width="15%">PERIOD 1 (65 Min.)<br>8:10 – 9:15</th>
        <th style="text-align: center;" scope="col" width="15%">PERIOD 2 (65 Min.)<br>9:15 – 10:20</th>
        <th rowspan="99" scope="col" width="2%">
          <div style="writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; width: 100%; height: 100%;">
            BREAK 35 minutes (10:20 – 10:55 )
          </div>
        </th>
        <th style="text-align: center;" scope="col" width="15%">PERIOD 3 (65 Min.)<br>10:55 - 12:00</th>
        <th style="text-align: center;" scope="col" width="15%">PERIOD 4 (60 Min.)<br>12:00 - 1:05</th>
        <th rowspan="99" scope="col" width="2%">
          <div style="writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; width: 100%; height: 100%;">
            BREAK 40 minutes (1:00 pm - 1:45 pm)
          </div>
        </th>
        <th style="text-align: center;" scope="col" width="15%">PERIOD 5 (60 Min.)<br>1:45 – 2:45</th>
        <th style="text-align: center;" scope="col" width="15%">PERIOD 6 (45 Min.)<br>2:45 – 3:30</th>
      </tr>
    </tbody>
  </table>
</div>

内容的提问来源于stack exchange，提问作者Haya