我有这个
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: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>