7

ヘッダーとして縦書きのテキストを含む HTML テーブルを作成したいと考えています (つまり、ヘッダー テキストが 90 度回転しています)。私は以下のスタイルを使用しています

<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/

ティア、タマス

4

4 に答える 4

15

<th>CSSだけでコンテンツを回転させたときに高さが変わるとは思えません。以下は、少しのjQueryでこれを行う方法です。

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

于 2012-02-24T17:14:58.513 に答える
5

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

CSS を使用して要素 ( a<div>など) を<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>
于 2013-03-26T12:16:43.240 に答える