Question

我在很多不同的论坛上已经在网上搜索了好几个小时，但似乎没有人能得到我需要的答案。如何在表格单元格中垂直对齐文本？像那样：但没有空格

V

电子

[R

Ť

我

C

A

→

这是我的代码：

.VerticalText {
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    }

<table width="98%" border="1" style="">
      <tbody>
        <tr>
          <table width="98%" border="1" style="">
      <tbody>
        <tr>
          <td rowspan="2">TEXT</td>
          <td rowspan="2">TEXT</td>
          <td colspan="7" align="center">TEXT</td>
          <td rowspan="2">TEXT</td>
        </tr>
        <tr>
          <td class="VerticalText">TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
        </tr>
      </tbody>
    </table>

我尝试了文字方向，文字方向等。

我迷路了，有人可以帮忙吗？

Answer 1

您可以将文字包装在span中，将其设为块元素，并将其设为非常小的width（以便只有一个字母适合），还可以word-break: break-all;，所以单词实际上是单个字母。（我将更改后的.VerticalText课程分配给了以下示例中的span元素

.VerticalText {
  display: block;
  width: 0.9em;
  word-break: break-all;
}

<table width="98%" border="1" style="">
  <tbody>
    <tr>
      <table width="98%" border="1" style="">
        <tbody>
          <tr>
            <td rowspan="2">TEXT</td>
            <td rowspan="2">TEXT</td>
            <td colspan="7" align="center">TEXT</td>
            <td rowspan="2">TEXT</td>
          </tr>
          <tr>
            <td>TEXT</td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
          </tr>
        </tbody>
      </table>

如何在表格单元格中垂直对齐文本？

1 个答案: