使用垂直方向的文本作为表格标题创建HTML表格_Html_Css_Vertical Text

使用垂直方向的文本作为表格标题创建HTML表格

html css

使用垂直方向的文本作为表格标题创建HTML表格,html,css,vertical-text,Html,Css,Vertical Text,我想创建一个HTML表格，以垂直书写的文本作为标题（即标题文本旋转90度）。我用的是flollowing风格 <th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:

我想创建一个HTML表格，以垂直书写的文本作为标题（即标题文本旋转90度）。我用的是flollowing风格

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left"  id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

#列标题#

在MS IE 9.x中，显示正常。在Firefox和Chrome中，标题似乎漂浮在表的顶部，与下面的表行重叠。有人能帮忙吗？我不知道为什么会这样。我从本教程开始：

TIA，Tamas

我不相信你能在单独使用CSS旋转内容时改变

的高度。下面是我如何使用jQuery实现这一点的

来自

使用CSS旋转

元素中的元素（例如

）会导致列宽缩小，以容纳旋转后的文本，但行高不会根据需要增加

在Mac上的Chrome和Safari中工作（至少对我来说）


th
{
背景颜色：灰色；
颜色：白色；
文本对齐：居中；
垂直对齐：底部对齐；
高度：150像素；
垫底：3件；
左侧填充：5px；
右侧填充：5px；
}
.垂直文本
{
文本对齐：居中；
垂直对齐：中间对齐；
宽度：20px；
边际：0px；
填充：0px；
左：3倍；
右侧填充：3px；
填充顶部：10px；
空白：nowrap；
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
};
第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏
数据1
数据1
数据1
数据1
数据1
数据1
数据1
数据1
数据1
数据2
数据2
数据2
数据2
数据2
数据2
数据2
数据2
数据2

我认为有一种更简单的方法可以在表格单元格中获取垂直文本：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        td {
        text-align: center;
        }
        /*Creation of vertical text in cell*/
        .vertical_Text {

                display: block;
                color: #f00;

                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
    </style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20">
    <thead>
        <tr>
            <!-- vertical cell -->
            <td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td>
            <td>header1-2</td>
            <td colspan="3">header1-2</td>
        </tr>

        <tr>
            <td>header2-1</td>
            <td>header2-2</td>
            <td>header2-3</td>
            <td>header2-4</td>
        </tr>

    </thead>
    <tbody>

        <!-- tr*5>td{data-$/$$}*5 -->
        <tr>
            <!-- vertical cell -->
            <td rowspan="5"><span  class="vertical_Text" title="vertical text">DATA</span></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
</body>
</html>


测试
运输署{
文本对齐：居中；
}
/*在单元格中创建垂直文本*/
.垂直文本{
显示：块；
颜色：#f00；
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
};
头
校长1-2
校长1-2
校长2-1
校长2-2
校长2-3
校长2-4
资料
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据

不适用于Safari，我无法使列变细。这将适用于Firefox（-moz transform），并将标题宽度减小到适当的大小。自首次回答此问题以来的3年中发生了很多事情。看起来FF现在支持

写入模式

样式，并且与

转换

冲突。问题是您在

150px

的

th

样式上设置了静态高度。看看所有额外的空白，甚至在垂直文本列上方：这就是为什么我更喜欢使用jQuery，因为它会将高度设置为只适合最长文本位所需的高度。你是对的-我错误地认为行高度正在调整，但我只是粗心而已！看起来这两个答案的混合可能会给出最好的结果…？只适用于示例中的数据，但标题较长，而不是标题损坏的表格，teble的秋天

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        td {
        text-align: center;
        }
        /*Creation of vertical text in cell*/
        .vertical_Text {

                display: block;
                color: #f00;

                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
    </style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20">
    <thead>
        <tr>
            <!-- vertical cell -->
            <td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td>
            <td>header1-2</td>
            <td colspan="3">header1-2</td>
        </tr>

        <tr>
            <td>header2-1</td>
            <td>header2-2</td>
            <td>header2-3</td>
            <td>header2-4</td>
        </tr>

    </thead>
    <tbody>

        <!-- tr*5>td{data-$/$$}*5 -->
        <tr>
            <!-- vertical cell -->
            <td rowspan="5"><span  class="vertical_Text" title="vertical text">DATA</span></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
</body>
</html>