表格中的垂直文本[重复]

Question

我有一张有很多列的表。所以我想用类似的文字创建列标题

  <tr><td style="vertical???">Vertical</td>
      <td style="Vertical???">Heading</td>...</tr>

没什么特别的。没有花哨的偏移量。只是单元格中的垂直文本。

最终会是这样的

V   H
e   e
r   a
t   d
i   i
c   n
a   g
l

我尝试了多种浮点数和变换原点，但未能完成这个最简单的事情。框外的奇怪文字，很容易。但是一个简单的表格标题，没有。

是否可以不诉诸绝对定位和其他粗俗的技巧？

Answer 1

试试这个，希望对你有帮助..

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
td {
	writing-mode: vertical-lr;
	text-orientation: upright;
}

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Answer 2

如果您可以选择添加自定义 html，则可以使用换行符。

table{
  width: 100%;
}

<table>
<tr>
  <td>V<br>e<br>r<br>t<br>i<br>c<br>a<br>l</td>
  <td>H<br>e<br>a<br>d<br>i<br>n<br>g</td>
</tr>
</table>

否则，恐怕您会看到基于 JavaScript 的解决方案。像这样的：

window.addEventListener( 'load', () => {
  let verticals = document.querySelectorAll( 'td.vertical' );
  verticals.forEach( node => {
    node.innerHTML = node.innerText.replace( /./g, `$&<br>`);
   });
});

table{
  width: 100%;
}

<table>
<tr>
  <td class="vertical">Vertical</td>
  <td class="vertical">Heading</td>
</tr>
</table>

Answer 3

您可以使用CSS/text-orientation。但它不会改变td 的宽度，所以在你想要垂直文本的 td 内部使用了 div 的技巧。

下面是工作示例：

.vertical {
  writing-mode: vertical-lr;
  text-orientation: upright;
padding-left:15px;
}

<table>
  <tr>
    <th>Vertical</th>
    <th>Heading
    </th>
  </tr>
  <tr>
    <td>
      <div class="vertical">Vertical</div>
    </td>
    <td>
      <div class="vertical">Heading</div>
    </td>
  </tr>

  <tr>
    <td>
      <div class="vertical">Vertical</div>
    </td>
    <td>
      <div class="vertical">Heading</div>
    </td>
  </tr>
</table>