3

CSSの第一人者の支援が必要です。

<table>列ヘッダー（<th>タグ）のテキストを270度回転させて横向きに表示する、単純なhtmlを作成しようとしています。

ヘッダーセルを固定するのに問題があるため、セルテキストの左端の部分がすべての<th>タグの下部またはベースラインだけに整列します。

私はこれを何度も試みましたが、CSSでは解決できません。

誰かがこれを達成する方法について私にいくつかのアイデアを与えることができますか？

http://jsfiddle.net/franco13/t5GgE/で私のjsfiddleを参照してください

これが私が達成したいことです：

ここに画像の説明を入力してください

4

2 に答える 2

5

http://jsfiddle.net/t5GgE/1/

ヘッダーのポイント（65、60）で変換の原点を指定します。折り返しは許可せず、td中央揃えにします。

th.rotate {
    white-space: nowrap;
    -webkit-transform-origin: 65px 60px;
    -moz-transform-origin: 65px 60px;
    -o-transform-origin: 65px 60px;
    -ms-transform-origin: 65px 60px;
    transform-origin: 65px 60px;
}

td.rights {
    text-align: center;
}

IE8以下の更新

IE8以下の場合、の代わりに変換行列rotate(270deg)を使用する必要があります。したがって、270度の対応する回転行列はです[0, 1, -1, 0]。

あなたがする必要があるのは、以下を追加することであり、IE8以下では問題なく動作するはずです：

th.rotate span {
    /* rotated text in IE renders very bad (unless you use clear type), so that even by making it normal, looks less bold but still bold */
    font-weight: normal\9; /* \9 is an hack for IE8 and below */
    letter-spacing: 3px\9; /* because is so bold, need to give letters some space to breath */

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod = "auto expand");
    width: 150px\9;
    height: 150px\9;
    margin-right: -130px\9;
}

jsFiddleの最終バージョン

IE9の問題と回避策 IE9では、ヘッダーセクションに大きな黒い長方形が表示されます。このバグの理由は、IE9がとの両方-ms-transformを認識するためfilterです。両方のCSSが存在する場合、ブラウザーは単に黒い領域をレンダリングします。これを回避するには、IE9で-ms-transformのみ使用する条件付きインクルードを使用することをお勧めします。

于 2013-02-21T13:07:34.983 に答える
0 
  table {
    margin-bottom: 20px; border: solid 1px red
  }
  tr#groups {
    /*display:block;
    margin-left:120px;
    margin-top:120px;*/
  }

  th.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    /*display:inline-block;*/
    height:30em;
    /*float:left;*/
    /*width:30px;*/
  }
  span.intact {
      display: block;
      white-space:nowrap;
    text-align:right
  }
  td.menuItems {
    width: 240px;
  }
  td.no-indent {
    font-weight: bold;
  }
  td.indent {
    padding-left:12px;
  }
  td.rights {
    width:20px;
  }
  td,th { border: solid 1px red}

これが最終的なものではないことはわかっていますが、高さをth.rotateに入れ、スパンを変更して表示します：ブロック、ノーラップ、右揃え...これで終了すると確信しています; o）

于 2013-02-21T13:05:32.293 に答える