0

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

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

这是我在 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>

4

0 回答 0