table 或网格中旋转文本的垂直对齐和定位

Question

我正在尝试旋转 html table 中的一些文本，但无论我做什么，我最终都会遇到一些对齐和文本流问题。

我试过在 css 中使用书写模式和旋转的各种组合，但无法解决问题。这是测试 table：https://universaltheosophy.com/hpb/test-table.htm

代码如下：

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<table cellpadding="2" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
    </td>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png"></p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

问题主要出在两个地方：

旋转的文本在 table td 元素的顶部和底部边界内没有正确对齐。文本要么延伸到 td 边界之外，要么被压在一起（当您运行此处的代码片段时，请查看普通视图和完整页面视图之间的区别）
文本水平对齐远离中心的图像（我希望中心图像两侧的旋转文本紧靠它）。

编辑

为了解决这里的第一条评论（关于行跨度），这里是没有行跨度的相同 table，结果相同：

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<table cellpadding="5" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png" class="img1"></p>
    </td>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

Answer 1

我有一个不同解决你的问题的方法CSS grid layout:

注意在不使用表格的情况下标记的变化。使用 display: grid 创建 网格布局 - 请注意，标记中的 &nbsp 用于空网格项。
在外部容器上使用 grid-template-columns: repeat(3, min-content) 制作宽度为 min-content 的三列布局。
使用 grid-template-rows: 1fr min-content

对于垂直对齐，我使用 writing-mode:

.wmode {
   writing-mode: tb-rl;
   transform: rotate(-180deg);
}

参见下面的演示：

.container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows: 1fr min-content;
  justify-content: center;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.wmode {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}

<div class="container">
  &nbsp;
  <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
  &nbsp;
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
  <img src="https://via.placeholder.com/400x338?text=image">
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
  &nbsp;
  <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
  &nbsp;
</div>

table 或网格中旋转文本的垂直对齐和定位

Vertical alignment and positioning of rotated text in a table or grid

html

css

html-table

rotation

css-grid