垂直显示表头内容

Displaying table header content vertically

本文关键字：表头 显示 垂直      更新时间：2023-09-26

我有这个

header1 header2
 data1  data2

但是我想把它显示为

h       h
e       e 
a       a 
d       d
e       e 
r       r
1       2
data1   data2

我还想在标题和表行周围设置边框。

编辑:

根据Vinc199789的回答，我想出了这个。

 <table>
  <tr style="border 1px solid;text-align:center;">
     <th style="width:1px;word-break:break-all;border:1px solid;text-align:center;"><div style="width:1px;word-break:break-all;text-align:center;">Jill</div></th>
     <th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">Smith</div></th>
     <th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">50</div></th>
  </tr>
  <tr>
    <td style="border: 1px solid;">Eve</td>
    <td style="border: 1px solid;">Jackson</td>
    <td style="border: 1px solid;">94</td>
  </tr>
</table>

然而，我需要以下改进:

  1. 如果你看到输出，"Jill"在J上方有一个间隙，"Smith"占据了整个垂直空间，"50"在中间。是否有一种方法，使所有的头从垂直空间的天花板开始?

  2. 我还想要一个方法来居中对齐"Jill"， "Smith"answers"50"。

可以使用css word-break: break-all

我所做的是我在td中添加了div，并将width设置为1px(这是为了确保不能有两个字母放在彼此旁边)。我还添加了word-break: break-all，您可以在代码片段中看到结果。

编辑对于margin-left:auto和margin-right:auto，我将垂直标题居中，对于text-align:center，我将其他表内容居中。

如果你把vertical-align:top添加到td，你也有你的标题放在顶部

更新小提琴

td > div{
  width:1px;
  word-break: break-all;
  margin-right:auto;
  margin-left:auto;
}
td{
  text-align:center;
  vertical-align:top;
}
 <table style="width:100%">
  <tr>
     <td><div>Jill</div></td>
     <td><div>Smith</div></td>
     <td><div>50</div></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

相关文章：