1

SlickGrid ヘッダーの高さを変更し、次の CSS を使用してヘッダー内のテキストを回転させています。

.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.slick-header-columns, .slick-header-column {
    height: 200px !important;
}

理解を深めるために、以下をご覧ください。

http://jsfiddle.net/2Nvc3/1/

ヘッダー内の回転されたテキストは中央に配置され、切り取られます。下から始まるように配置を変更するにはどうすればよいですか (テキストは -90° 回転する前に左揃えにする必要があります)。

列の 1 つの幅は、意図的に異なります。

4

1 に答える 1

2

jsFiddleへのリンク しばらく遊んでみました。基本的に問題は、回転の起点がテキスト/ヘッダーの中央にあることでした。「Else else SOmeshing Else」は他の列名に比べてかなり長いので、両側からはみ出しています。いずれにせよ、場所の起点をテキストの先頭に変更すると、この問題は解決します。次に中央に配置します... horizontally(回転後) margin-left を配置したテキスト40%- 少なくとも Chrome では見栄えがよくなりますが、そうでない理由は正確にはわかりません50%。テキストを中央に配置するには... vertically(回転後) のテキスト インデントを追加します。-235pxこれは、テキストに合わせてここで選択した高さによって決定されます250px。

于 2013-05-04T00:01:07.720 に答える