css - テーブル内のCSS3変換アライメントの問題

Question

テキストが-90度回転したテーブルを作成しようとしています。今までテキストの画像を使っていましたが、これをテキストに変えたいと思っていました。

修正できないと思われる問題がいくつかあります。

1. 列07のテキストが列08にオーバーフローします。
   • これをoverflow：hiddenで修正することはできません。正しい形状を得るには、幅と高さの両方を200pxに設定する必要があるためです。
2. 回転したテキストの幅と高さを設定する必要があるため、操作があまり柔軟になりません。これも問題1の原因になります。
3. 幅を200pxに設定する必要があるため、マージンを「0 -100px」に設定する必要がありますが、回転しても幅は200pxのままであり、テーブルが非常に大きくなります。
4. フォントサイズを変更すると、列にうまく収まりなくなります。
5. フォントはひどく見え、読みにくいです。これは、ブラウザの将来のアップデートでうまくいくと思います。

これが実際のjsFiddleです

http://jsfiddle.net/CoryMathews/ZWBHS/

私はそれが機能する必要があり、IE7 +、Chrome、FF、およびOperaで同じポイントに到達しました。

この方法を実際に使用できるように改善する方法について何かアイデアはありますか？私のアイデアのいくつかは次のとおりです。

1. ページの読み込み時にjavascriptを使用して幅や高さなどを計算できます。これにより、上記の問題2と3は解決されますが、1は解決されません。ただし、表示にjavascriptを使用するのは嫌です。

2. おそらく、私はより良い制御を与える変換原点を誤用しています。現在使用している数値「00」を使用すると、必要なサイズを簡単に計算できます。

Answer 1

このソリューションはいくつかの問題を修正しますが、完全ではありません。

1. whitespace: nowrap次の行に流れるテキストを無効にするために使用します。
2. 各セルの内容を。でコンテナにラップしwidth: 1emます。列は常に1行の垂直テキストに十分な幅です。フォントサイズは自由に調整できます。

3. テーブルの高さを手動で設定して、回転したコンテンツを完全に表示します（-90度）。高さをハードコーディングすることは素晴らしいことではありませんが、利点があります。固定幅/変換原点/相対位置/JavaScriptに対抗するために固定幅と負のマージンが必要ありません。テキストは自動的に列の下部にスナップします。

4. 2を参照してください。

5. サンセリフフォントをお勧めします。フォントの詳細度が低いほど、変換後の見栄えが良くなります。

これはFirefox、Chrome、Opera、IE9+で動作します。縦書きのテキストはIE8以前では機能しません。次を使用してテーブルを回転させてみました：

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)

結果がひどいように見えるので、単純な水平テーブルを表示するためにフォールバックスタイルを追加しました。

body {
    font-family: sans-serif;
    padding: 10px;
    font-size: 12px;
}

td, tr, th, table { border: 1px solid #333; }
td:nth-child(odd) { background: #eee; }
td {
    overflow: hidden;
    white-space: nowrap; /* text on one line only */
    vertical-align: bottom;
    height: 300px; /* to be adjusted: column is not always tall enough for text */
}

td > div {
    padding: 10px;
    width: 1em; /* column is always wide enough for text */
}

td > div > div {
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
}

<!--[if LT IE 9]>
    <style>
        table { width: 100px; }
        td {
            white-space: normal;
            vertical-align: baseline;
            height: auto;
        }
        td > div {
            width: auto;
        }
    </style>
<![endif]-->
<table>
    <tr>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
        <th>07</th>
        <th>08</th>
        <th>09</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
    </tr>
    <tr>
        <td><div><div>Report Results 1</div></div></td>
        <td><div><div>Shinanigans</div></div></td>
        <td><div><div>CSS Transforms Suck</div></div></td>
        <td><div><div>Lorem Ipsum</div></div></td>
        <td><div><div>So Damn Pixelated</div></div></td>
        <td><div><div>This font looks Terrible</div></div></td>
        <td><div><div>Too Long to read on 1 line Set dimensions suck</div></div></td>
        <td><div><div>Grumble Grumble.</div></div></td>
        <td><div><div>Homebrew!</div></div></td>
        <td><div><div>Spotify Commercial Suck</div></div></td>
        <td><div><div>Grooveshark FTW!</div></div></td>
        <td><div><div>Beer time yet?</div></div></td>
    </tr>
</table>

Answer 2

テーブルに変換を適用すると、すべてのブラウザがおかしくなります。私も複数行の問題に遭遇しました。私が見つけた唯一の回避策は、回転されるdivではなく、テーブル全体になるようにテーブルのマークアップを変更することでした。

次に、逆変換を使用してテーブルヘッダーの「回転を解除」します。

http://jsfiddle.net/G93KE/

これがIE7-8フィルターで機能するかどうかはわかりません。

Answer 3

Duopixelとして、（回転しない）

<style>

body { font-family: "Times New Roman", Times, serif; padding:10px; }
td, tr, th, table { border:1px solid #333; }
td:nth-child(odd) { background:#eee; } /* No IE, No Cares */

td.title { width:200px; }

table {       
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    width:250px; 

    position:relative;
    top:250px;
  }

td > div {       
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    position:relative; /*Needed to position in the correct columns*/
    height:20px; /* Need to not set this, needed for columns to fill*/
    left:20px; /*Needed to line up, .5 of width - padding*/
}

</style>

<!--[if LT IE 9]>
    <style>
        table {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            top:0px;
        }
        td div { /* ah..? didn't action of filter..? by td > div..? */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            overflow:hidden;
            width:20px; /* fix to number.. */
            height:20px; /* fix to number.. */
        }
    </style>
<![endif]-->
<table>
    <tr>
        <td class=title >Report Results 1</td>
        <td><div>01</div></td>
    </tr>
    <tr>
        <td class=title >Shinanigans</td>
        <td><div>02</div></td>
    </tr>
    <tr>
        <td class=title >CSS Transforms Suck</td>
        <td><div>03</div></td>
    </tr>
    <tr>
        <td class=title >Lorem Ipsum</td>
        <td><div>04</div></td>
    </tr>
    <tr>
        <td class=title >So Damn Pixelated</td>
        <td><div>05</div></td>
    </tr>
    <tr>
        <td class=title >This font looks Terrible</td>
        <td><div>06</div></td>
    </tr>
    <tr>
        <td class=title >Too Long to read on 1 line Set dimensions suck</td>
        <td><div>07</div></td>
    </tr>
    <tr>
        <td class=title >Grumble Grumble.</td>
        <td><div>08</div></td>
    </tr>
    <tr>
        <td class=title >Homebrew!</td>
        <td><div>09</div></td>
    </tr>
    <tr>
        <td class=title >Spotify Commercial Suck</td>
        <td><div>10</div></td>
    </tr>
    <tr>
        <td class=title >Grooveshark FTW!</td>
        <td><div>11</div></td>
    </tr>
    <tr>
        <td class=title >Beer time yet?</td>
        <td><div>12</div></td>
    </tr>
</table>

Answer 4

まず、重複するテキストを修正しましょう：td {white-space：nowrap;}

CSS変換は、ある面では「position：relative」にいくぶん似ており、フロー内のオブジェクトの位置ではなく、オブジェクトのレンダリングを変更します。これは、現在、div幅に基づいてセルの高さを動的に調整する方法がないことを意味します（少なくともcss式の実装が開始されるまで）。

その発見を念頭に置いて、私たちは今、私たちが望むすべての流れからdivを自由に取り除くことができます。親セルの左上隅に絶対に設定します。訓練を受けた専門家なので、これを行うことができます：td {position：relative;} td> div {position：absolute; top：0; left：0;}

これをよく見てください。これで、セルのコンテンツ全体が上にシフトされました。ブロックの変換方法に影響を与えるため、ブロックの位置を調整することはできません。代わりに、ブロックの変位を調整します。margin：100％0 -100％;

上記のフローから要素を削除しました（そして正当な理由もあります）。これで、親セルに高さを適用するだけで、準備が整いました。

http://jsfiddle.net/ZWBHS/2/

アップデート：

いつでもtext-overflowプロパティを追加し、text＆cellサイズを修正して、http：//jsfiddle.net/ZWBHS/3/のように最小限の更新作業が必要になるようにすることができます。

切り捨てられたテキストが失われないように、それを複製するタイトル属性を投入しますか？