Question

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

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

＆＃13;

.vert_dir {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  float: right;
  writing-mode: tb-rl;
}

＆＃13;

<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>

＆＃13;

Answer 1

请看看： How to display vertical text in table headers with auto height / without text overflow?

使用-90度而不是90度。

Answer 2

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

在表格标题中从下到上进行文字指示我们使用.vert_dir类。

要为列提供必要的宽度，我们必须在上方或下方行的相应单元格中添加＆＃34; nbsp＆＃34; s。

如果行是表中唯一的一行，我们可以添加一个带有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下面的单元格没有＆amp; nbsp s。

在此示例中，第1列和第2列的下方单元格填充了＆＃34;＆amp; nbsp＆＃34; -s适用于所有浏览器。

我们如何在表格标题中制作文字方向从下到上？

2 个答案: