垂直显示表头内容

Question

我有这个

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”和"50“。文本对齐:中心不工作。

Answer 1

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

我所做的是在一个div中添加一个td，并将width设置为1px (这是为了确保不能将两个字母放在一起)。我还添加了word-break: break-all，您可以在代码片段中看到结果，或者是这把小提琴。

用margin-left:auto和margin-right:auto i编辑，以垂直标题为中心，以text-align:center i为中心，以其他表内容为中心。

如果将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> 

​