web-dev-qa-db-ja.com

CSS変換によるテーブルヘッダーテキストの回転

これは、次のようにして可能になるはずです。

.verticalText 
{           
    /* IE-only DX filter */
    writing-mode: tb-rl;
    filter: flipv fliph;

    /* Safari/Chrome function */
    -webkit-transform: rotate(270deg);

    /* works in latest FX builds */
    -moz-transform: rotate(270deg);
}

これはIEで機能します。

Safariで奇妙な方法でうまくいかない、Chrome and FX-セルのサイズが計算される前にテキストが回転！

screenshot of bug

ここにデモがあります： http://jsfiddle.net/HSKws/

私は動的画像を回避策として使用していますが、それは 問題もあります です。これはフォールバックとして満足していますが、このCSSを機能させる方法があるはずです。

変換が適用された後、セルをコンテンツに合わせる方法を誰かが知っていますか？

csscross-browser
35
Keith

「変形」は、要素内のテキストコンテンツではなく、宣言した要素全体の向きを変更します。これは、「ライティングモード」ではなく、IEの「マトリックス」プロパティに似ています。

重要なことに、要素を変換しても、コンテンツサイズの計算方法（またはその親のレイアウトがそのサイズによってどのように影響を受けるか）は変わりません。 CSSの垂直方向と水平方向のサイズ変更のアルゴリズムは異なり、使いこなすのに十分困難です。彼らが任意のローテーションでコンテンツを収容できる実際の一貫した方法はありません。したがって、「変換」は「位置：相対」を使用するようなものです。コンテンツがレンダリングされる場所は変わりますが、レイアウトサイズとは関係ありません。

したがって、表に含める場合は、セルの「高さ」を明示的に設定して、予想される回転された「幅」に対応する必要があります。事前にそれがわからない場合は、おそらくJavaScriptでハッキングする可能性があります。

FWIW：私にとってFx3.1b3では、スパンも他のように回転されます。ただし、Windowsで水平のみのアンチエイリアス（ClearType）を使用すると、レンダリングが美しく表示されません...うまくレンダリングされた画像は、かなり良くなる可能性があります。

18
bobince

XHTMLドキュメントでインラインSVGを使用することは可能です（私はSafariとFirefoxのみをテストしました）：

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <table border="1">
        <tr>
            <td>&#160;</td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
        </tr>
        <tr>
            <td>Example row header</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
  </body>
</html>

残念ながら、テーブルセルの幅と高さ、およびSVGを使用してレンダリングされたテキストの翻訳を明示的に設定する必要があります。また、ファイル拡張子はxhtmlでなければなりません。

9
otto.poellath

Webkitが追加しました：

-webkit-writing-mode:vertical-rl;

divに適用できるもの。

7
Stephen Denne

同様の質問 で回答したので、これを David VotrubecによるjQueryプラグイン とブログ投稿の下のMikeによるコメントを使用して解決しました。

これを.jsファイルに入れます。

(function ($) {
  $.fn.rotateTableCellContent = function (options) {
  /*
Version 1.0
7/2011
Written by David Votrubec (davidjs.com) and
Michal Tehnik (@Mictech) for ST-Software.com
*/

var cssClass = ((options) ? options.className : false) || "vertical";

var cellsToRotate = $('.' + cssClass, this);

var betterCells = [];
cellsToRotate.each(function () {
var cell = $(this)
, newText = cell.text()
, height = cell.height()
, width = cell.width()
, newDiv = $('<div>', { height: width, width: height })
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

newInnerDiv.css('-webkit-transform-Origin', (width / 2) + 'px ' + (width / 2) + 'px');
newInnerDiv.css('-moz-transform-Origin', (width / 2) + 'px ' + (width / 2) + 'px');
newDiv.append(newInnerDiv);

betterCells.Push(newDiv);
});

cellsToRotate.each(function (i) {
$(this).html(betterCells[i]);
});
};
})(jQuery);

そして、これはあなたのページの上部にあります：

<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.yourtableclass').rotateTableCellContent();
    });
</script>

そしてこれはあなたのCSSで：

/* Styles for rotateTableCellContent plugin*/
table div.rotated {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode:tb-rl;
    white-space: nowrap;
}

thead th {
    vertical-align: top;
}

table .vertical {
    white-space: nowrap;
}

次に、テーブルにクラス「yourtableclass」があり、ローテーションするすべてのTDにクラス「vertical」があることを確認します。

これが jsFiddleで実行中のデモ です。

私が2年遅れても、それが誰かを助けることを願っています！

6
Jobjörn Folkesson

テーブルヘッダー内でテキストを回転させるには：

  1. ヘッダーコンテンツをdiv内に配置-ヘッダー自体ではなく、これらのdivを回転
  2. テーブルヘッダーthにposition：relativeを設定し、回転したdivにposition：absoluteを設定します。
  3. thヘッダーの高さも設定する

できました。

あなたはそれをここで見ることができます：

enter image description here

ウィンドウを細くすると、このページに表示されます-1000ピクセル未満で、テーブルヘッダーが回転します http://www.rugbydata.com/

これが私が使ったコードです：

div.rotatabletext {
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:0px;
text-align:left;
height:0px;
margin-left:0px;
margin-top:0px;
bottom:2px;
position:absolute;
}
table.tournamentresults > * > tr > td {
padding:1px;
}
table.tournamentresults > thead > tr:nth-child(1) > th:nth-child(1) {
height:70px;
position:relative;
}
table.tournamentresults > thead > tr:nth-child(2) th {
height:70px;
position:relative;
}
4
Dave Hilditch

このツールは私のためのすべての考えをしました...

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

3
doublejosh