我有这个

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> 





但是,我需要对此进行以下改进:


如果看到输出,则“ Jill”中的J上方有一个缝隙,“ Smith”占据整个垂直空间,“ 50”位于中间。有没有办法使所有页眉从垂直空间的天花板开始?
我还想要一种使“ Jill”,“ Smith”和“ 50”居中对齐的方法。 text-align:center不起作用。

最佳答案

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

我所做的是在div内添加了td并将width设置为1px(以确保不能将两个字母彼此相邻放置)。我还添加了word-break: break-all,您可以在代码段中看到结果,或者为this fiddle

编辑
使用margin-left:automargin-right:auto将垂直标题居中,而使用text-align:center将其他表内容居中。

如果将vertical-align:top添加到td,则标题也将放在顶部

updated fiddle



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> 

10-05 20:53
查看更多