1

我们如何使表格标题中的文本方向从下到上？以下代码适用于 Chrome。但它不适用于 Firefox。

是否可以为所有浏览器提供通用代码？

.vert_dir {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  float: right;
  writing-mode: tb-rl;
}
<p>&nbsp;</p>
<table border="1" style="position:relative;">
  <tbody>
    <tr>
      <td><span class="vert_dir">Column 1</span></td>
      <td>Column 2</td>
      <td class="vert_dir">Column 3</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

4

2 回答 2

1

请看一下： 如何在具有自动高度/没有文本溢出的表格标题中显示垂直文本？

使用 -90 度而不是 90 度。

于 2017-06-11T14:58:06.957 回答
0

所以，我们可以总结一下上面的讨论。

为了使表格标题中的文本方向从下到上，我们使用 .vert_dir 类。

为了获得必要的列宽度，我们必须在上方或下方的相应单元格中添加“nbsp”。

如果该行是表中唯一的行，我们可以添加一个带有 class=trhidden 的空行，以填充相应单元格中所需的 nbsp 计数。

.vert_dir {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    /*text-align:center;*/
    -ms-writing-mode:tb-rl;
    writing-mode:tb-rl;
}
.trhidden
{
    visibility:collapse;
}

<table border="1">
  <tbody>
    <tr>
      <td><span class="vert_dir">1. Column 1 - the good version</span></td>
      <td><p><span class="vert_dir">2. Column 2</span></p></td>
      <td>3. Column 3</td>
      <td class="vert_dir"><p>4. test Column 4</p></td>
      <td><p class="vert_dir">5. this is test Column 5</p></td>
      <td><span class="vert_dir">6. Column 6</span></td>
    </tr>
    <tr class=trhidden>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

第 1 列和第 6 列是相同的，只是单元格 6 下方的单元格没有   。

在此示例中，第 1 列和第 2 列以及下面填充有“ ”-s 的单元格适用于所有浏览器。

于 2018-03-07T18:19:26.177 回答