Создание таблицы HTML с вертикально ориентированным текстом в качестве заголовка таблицы - PullRequest
Новая
       60

Создание таблицы HTML с вертикально ориентированным текстом в качестве заголовка таблицы

6 голосов
/ 24 февраля 2012

Я хотел бы создать 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 заголовок кажется плавающим над таблицей, он перекрывается строками таблицы под ним. Может кто-нибудь, пожалуйста, помогите? Я просто понятия не имею, почему это происходит. Я начал с этого урока: http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA, Тамас

Ответы [ 3 ]

15 голосов
/ 24 февраля 2012

Я не верю, что вы можете изменить высоту <th> при повороте его содержимого только с помощью CSS. Ниже описано, как я делаю это с небольшим количеством jQuery.

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

5 голосов
/ 26 марта 2013

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

Использование CSS для поворота элемента (например, <div>) в элементе <td> приводит к уменьшению ширины столбца для размещения только повернутого текста - однако высота строки не увеличивается по мере необходимости.

Работает в Chrome и Safari на Mac (по крайней мере, для меня). 

<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>
1 голос
/ 13 января 2017

Я думаю, что есть более простой способ получить вертикальный текст в ячейке таблицы: 

<!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>
...