在 Safari 中显示在单元格外的表格中的垂直文本

问题描述

我有一个表格，里面有一些需要垂直对齐的文本。我所拥有的东西在我测试过的所有浏览器中都可以正常工作并正确显示，除了 Safari。 Safari 最终会在表格单元格之外显示文本，而不是让表格单元格适合文本。所以我需要某种解决方案来专门解决 Safari 中的这个问题。可以在此处查看实时版本：https://universaltheosophy.com/hpb/secretdoctrine.html（滚动到第 2 页）。

请参阅下面的代码的干净版本。

这是我在 Firefox 中看到的（在 Chrome 中相同）：

这是我在 Safari 中看到的：

这是我的 html 和 css 的简化版本：

.wmode { 
  writing-mode: tb-rl; 
  transform: rotate(-180deg); 
  padding: 0px; 
  margin-left: 0em; 
  margin-right: 0em;
}

<table cellpadding="5" cellspacing="0" border="1">
    <col>
    <col>
    <col>
    <tbody>
    <tr>
        <td colspan="3">
          <p>SIMPLIFIED TABLE OF CONTENTS.</p>
        </td>
      </tr>
    <tr>
      <td colspan="3">
        <p>Preface</p>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <p>Introduction</p>
      </td>
    </tr>
    <tr>
      <td rowspan="4">
        <p class="wmode">Volume 1</p>
      </td>
      <td colspan="2">
        <p>Preface</p>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <p class="wmode">Book 1</p>
      </td>
      <td>
        <p>Part 1</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Part 2</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Part 3</p>
      </td>
    </tr>
    <tr>
      <td rowspan="4">
        <p class="wmode">Volume 2</p>
      </td>
      <td colspan="2">
        <p>Preface</p>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <p class="wmode">Book 2</p>
      </td>
      <td>
        <p>Part 1</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Part 2</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Part 3</p>
      </td>
    </tr>
    </tbody>
  </table>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）