如何在表格中倾斜文字?

时间:2014-12-02 20:54:11

标签: html css html-table

我需要创建一个包含21列的表。它在网站上看起来并不正确,因此您必须滚动查看表格的末尾。

我想要倾斜列的标题,因为这些值只是适合页面的数字。我已经搜索过这个但是除了一个使用图像的建议之外似乎无法找到它?

我知道它可以通过旋转文本在excel中完成,但只是不知道如何编码它所以它会在php / html中完成。

有什么建议吗?

1 个答案:

答案 0 :(得分:4)

您可以使用CSS来旋转文本。以下是JSFiddle

上的示例

HTML:

<table cellpadding="10">
<tr class="rotated">
    <td>The</td>
    <td>quick</td>
    <td>brown</td>
    <td>fox</td>
    <td>...</td>
</tr>
<tr>
    <td>The</td>
    <td>quick</td>
    <td>brown</td>
    <td>fox</td>
    <td>...</td>
</tr>
</table>

CSS:

tr.rotated td {
    -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg); 
  -ms-transform: rotate(90deg); 
  -o-transform: rotate(90deg); 
  transform: rotate(90deg);
}