7

ヘッダー テーブルのすぐ上に縦書きテキストを含むテーブルを作成しようとしています。

ここに画像の説明を入力

ここに私のCSSコードがあります:

table th.user {
  .rotate(90deg);
  position: relative;
  padding-top: 190px;
  top: -10px;
  right: 0px;
  width: 200px;
}

これがデモhttp://codepen.io/anon/pen/GnveJです

ご覧のとおり、部分的に機能します。幅がコンテンツ (約 50 ピクセル) にぴったり合う列 (名前がある列のセル) が必要です。この質問に添付した写真と同じです。
この目的のためにcssコードまたはjsコードを作成する最良の方法は何ですか?

要件:
less と jquery を使用しています

4

1 に答える 1

5

ユーザー名をにラップし、spanそれを回転させてwidth、セルにを設定します。セルを回転すると、テキストを回転する前にテーブルがそのサイズをレンダリングします。

table th.user span{
  display:block;
  .rotate(90deg);
  padding: 190px 0 0 0;
  position: relative;
  left: 20px;
  width: 200px;
}
.user, tbody td {
  max-width: 50px;
}

デモ

于 2012-10-18T21:16:29.777 に答える