2

ヘッダーテーブルだけに縦書きテキストとアバターを含むテーブルを作成しようとしています。

結果は次のようになります。

だから私の質問は次のとおりです
。1）テキストを270度回転させるには、cssファイルで何をすべきですか（.rotate（270deg）を作成します;すべてを台無しにします）
2）名前をアバターの上部に配置しますか？
3) Google Chrome では動作しますが、Firefox では動作しません :(

ここに私のデモがあります: http://codepen.io/anon/pen/CogKe

これが私のコードです：

.rotate(@deg){
  -webkit-transform: rotate(@deg);

}
table th.user span.name{
  display:block;
  .rotate(90deg);
  padding: 190px 0 0 0;
  position: relative;
  left: 20px;
  width: 200px;
}
table, td, th
{
border:1px solid green;
}
.user, tbody td {
  max-width: 50px;
  text-align: center
}
4

1 に答える 1

0

これを試して、クロスブラウザのテキスト回転の問題を回避してください

.rotate {
     -moz-transform: rotate(270deg);  /* FF3.5+ */
       -o-transform: rotate(270deg);  /* Opera 10.5 */
  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=270);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=270)"; /* IE8 */
}

HTML テーブルの縦 (回転) テキスト

于 2012-10-19T09:00:40.050 に答える