创建具有垂直方向文本的HTML表作为表头

Question

创建具有垂直方向文本的HTML表作为表头

我想创建一个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>

Run Code Online (Sandbox Code Playgroud)

在MS IE 9.x中显示OK.在Firefox和Chrome中,标题似乎浮动在表格的顶部,它与下面的表格行重叠.有人可以帮忙吗？我很简单,不知道为什么会这样.我从本教程开始:http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA,Tamas

Answer 1

dee*_*our 15

我不相信只<th>用CSS旋转它的内容就可以获得改变的高度.下面是我用一些jQuery做这个的方法.

http://jsfiddle.net/tsYRQ/1004/

在Firefox 46中对我不起作用 (2认同)

Answer 2

Sim*_*onD 5

来自http://blog.petermares.com/2010/10/27/vertical-text-in-html-table-headers-for-webkitmozilla-browsers-without-using-images/

使用CSS旋转元素<div>内的元素(例如a )<td>会导致列宽缩小以适应旋转的文本 - 但行高不会根据需要增长.

适用于Mac上的Chrome和Safari(至少对我而言).

<html>
    <head>
        <style>
            th
            {
                background-color: grey;
                color: white;
                text-align: center;
                vertical-align: bottom;
                height: 150px;
                padding-bottom: 3px;
                padding-left: 5px;
                padding-right: 5px;
            }

            .verticalText
            {
                text-align: center;
                vertical-align: middle;
                width: 20px;
                margin: 0px;
                padding: 0px;
                padding-left: 3px;
                padding-right: 3px;
                padding-top: 10px;
                white-space: nowrap;
                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg);                 
            };
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>Column 1</th>
                <th><div class="verticalText">Column 2</div></th>
                <th>Column 3</th>
                <th><div class="verticalText">Column 4</div></th>
                <th>Column 5</th>
                <th><div class="verticalText">Column 6</div></th>
                <th>Column 7</th>
                <th><div class="verticalText">Column 8</div></th>
                <th>Column 9</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
                <td>Data 1</td>
            </tr>
            <tr>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
                <td>Data 2</td>
            </tr>
        </table>

    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这个问题是你在'th`风格的'150px`上设置一个静态高度.查看所有额外的空格,甚至在垂直文本列的上方:http://jsfiddle.net/2xP5C/这就是为什么我更喜欢使用jQuery,因为它会将高度设置为仅适合所需的高度最长的文字. (2认同)

归档时间：	14 年前
查看次数：	50786 次
最近记录：	9 年，1 月前