1

ヘッダー行に傾斜したテキストを含むテーブルがありますが、唯一の問題は、テキストが列の幅を大きくすることです。テーブルの列をまとめて、選択ボックスの幅になるようにする方法はありますか? または、ヘッダーにテキストを配置せずにテキストを配置して、またはを使用する方法はあります<div>か<p>?

ここに私が取り組んでいるフィドルがあります: http://jsfiddle.net/t9Krg/1/

.slanted {

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);


    white-space:nowrap;
    /*
    display:noblock;
    */
}

ヘッダーの周りのボーダーは余分なスペースを確認するためのもので、後で削除されます。

4

3 に答える 3

2

絶対配置を使用すると、ページ上の好きな場所にオブジェクトを配置できます。ただし、テーブルに対して相対的に正しく配置するには、親要素に相対的な配置を適用する必要があります。

したがって、このマークアップの場合:

<th class="slanted">
  <div>This is a heading</div>
</th>

CSS は次のようになります。

.slanted {
  text-align:left;
  position:relative;   
  white-space:nowrap;
}

.slanted div {
  width:12em;
  position:absolute;
  top:4em;
  left:-1em;
  transform: rotate(-45deg);
}

topとの値を微調整してleft正しく処理する必要がありますが、ラベルに改行を入れるつもりがない限り、それほど難しくはありません。

JSFiddle へのリンク

于 2013-11-04T15:51:15.347 に答える