0

テーブルを表示するビューがあります。

  • 行は日を表します - 1 日につき 1 行
  • 列は、私のグループ エンティティを表します。各列の見出しには、グループ名と、+グループ アイテムを表すいくつかの追加の列にグループを展開するアイコンが表示されます。基本的に、拡張可能な列のグループ化があります。一度に 1 つのグループのみが展開されます。

ユーザーがグループ名の横にある + をクリックすると、一連の列がこのテーブルに追加され、それぞれがこれらの各グループ項目のカレンダー データを表します。つまり、グループはその項目に展開されます。これまでに他のグループが表示されている場合は、新しいグループが展開される前に縮小されます。

私のフォームは Ajax を使用しています。ページが読み込まれると、カレンダー ワールドのみが入力され、グループ ヘッダーが列に追加されます。

問題

  1. そもそもこのテーブルを実装する方法がわかりませんか? element と float のどちらを使用しtableますdiv/ulか? すべてのコンテンツ セル (ヘッダーではなく、カレンダーの日付を含む最初の列ではない) は同じサイズであるため、テーブル以外のものを使用できます。div/ulなぜ私は実装に傾倒するのですか？フローティングを使用すると、グループ項目を表す追加の列を動的にロードするのが簡単になるためです。列行の要素を持つことができるため、列グループを持つことができないため、これをテーブルを使用して実装するのは難しいと思いTBODYます (このデータの転置は不可能です)。

  2. 列の幅も同じにする必要があるため、グループ名とアイテム名を垂直に表示する必要があります。この方法では、すべての列が同じ幅になりますが、IE (可能であれば V7+)、FF、および CH ではこの方法でテキストを表示する必要があります。

質問

  1. このビューをどのように行うべきだとお考えですか (tableまたはdiv/ul要素を使用)? 私の頭に浮かばなかった完全に異なる代替案を提案することもできます。たぶん、あなたは自分で似たようなものを実装したことがあります...

  2. ヘッダーのテキストを確実に回転させる方法は? IE でのマトリックス フィルターと、mozilla および webkit ブラウザーでの変換を見てきましたが、テキストは元のコンテンツ ボックスからはみ出して配置されているように見えます。SVG の実装も見たことがありますが、そのブラウザーのサポートについては知りません (AFAIK IE はプラグインなしではサポートしていません)。

  3. 列を同じ幅に保ちながら、テキストの回転を使用しない方法はありますか?

4

2 に答える 2

0

質問2に答えるには：

あなたが抱えている問題は、おそらくIEのfilter回転と標準のCSS3回転が異なる回転点、つまり要素が回転する点を使用しているためです。

1つは要素の左上隅を使用し、もう1つは中心点を使用します。

私が知っているクロスブラウザローテーションの最良のリファレンスサイトはこれです：http ：//www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

お役に立てば幸いです。

于 2011-03-25T12:14:07.337 に答える
0

FF、CH、IE で動作するソリューション

これは私が最終的に得たものであり、さまざまな主要なブラウザー (FF、CH、および IE) でかなりうまく機能します。IE8 でテストしたところ、動作し、IE9 でも動作しました。したがって、自分で必要になる場合に備えて、将来の参照用に以下に示します。

  1. 私はテーブルを使用していませんが、フローティング DIV を使用しています
  2. すべてのセルはヘッダー付きの個別の DIV です
  3. ヘッダーのテキストが回転しました

回転したテキストは変換前の寸法を維持するため、実際には垂直方向に同等の寸法を与える別の要素内に含めることをお勧めします。このようにして、他のコンテンツ フローは中断されません。

これは単純化された HTML コードです。

<div class="head">
    <div class="vert">Vertical text example</div>
</div>

および付随する CSS:

.container .head
{
    /* float your elements or inline-block them to display side by side */
    float: left;
    /* these are height and width dimensions of your header */
    height: 10em;
    width: 1.5em;
    /* set to hidden so when there's too much vertical text it will be clipped. */
    overflow: hidden;

    /* these are not relevant and are here to better see the elements */
    background: #eee;
    margin-right: 1px;
}
    .container .head .vert
    {
        /* line height should be equal to header width so text will be middle aligned */
        line-height: 1.5em;
        /* setting background may yield better results in IE text clear type rendering */
        background: #eee;
        display: block;

        /* this will prevent it from wrapping too much text */
        white-space: nowrap;
        /* so it stays off the edge */
        padding-left: 3px;

        /* IE specific rotation code */
        writing-mode: tb-rl;
        filter: flipv fliph;

        /* CSS3 specific totation code */
        /* translate should have the same negative dimension as head height */
        transform: rotate(270deg) translate(-10em,0);
        transform-origin: 0 0;
        -moz-transform: rotate(270deg) translate(-10em,0);
        -moz-transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translate(-10em,0);
        -webkit-transform-origin: 0 0;
    }
于 2011-08-02T16:06:02.497 に答える