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>

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

如果看到输出，“Jill”中J之间有一个间隙，“Smith”占据整个垂直空间，“50”位于中间。有没有办法让所有标题从垂直空间的天花板开始？
我还想要一种方法来对齐“Jill”，“Smith”和“50”。 text-align：center不工作。

Answer 1

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

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

修改使用margin-left:auto和margin-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>

垂直显示表头内容

1 个答案: