1

HTML/CSS を使用してセットアップされたテーブルがあり、アコーディオンに変換される UL の LI 要素内にあります。問題は、LI 要素が特定の高さにアニメーション化されると、表のセルの高さが変更され、最後のセルがビューから非表示になることです。

親 LI 要素から固定高さが削除されている場合、この問題は発生しませんが、これはアコーディオンが機能するために必要です。親コンテナの高さ属性に関係なく、セルが常に同じ高さであることを確認する方法はありますか?

問題を示すために、次の JS Fiddle を設定しました。デフォルトでは、アコーディオン機能が実行されています。それを外すと、親コンテナに高さが追加される前の状態のテーブルが表示されます。

アコーディオンのデフォルトではすべての要素が閉じられているため、テーブルを開いてコンテンツを表示するには、「テーブル」と表示されているタイトル バーをクリックする必要があります。

http://jsfiddle.net/dsQtP/2/

見たい人のためのコードは次のとおりです。

HTML:

<ul class="accordion">
    <li>
            <h3>Table</h3>
    <span class="accordionContent">
                            <table>
                                <tr class="tableHeader">
                                    <td class="first">HEADER</td>
                                    <td>TITLE<span>SUBTITLE</span>

        </td>
        <td>TITLE<span>SUBTITLE</span>

        </td>
        <td class="last">TITLE<span>SUBTITLE</span>

        </td>
        </tr>
        <tr class="tableRow_odd">
            <td class="first">ACTIVE ITEM</td>
            <td>ACTIVE ITEM</td>
            <td>ACTIVE ITEM</td>
            <td class="last">ACTIVE ITEM</td>
        </tr>
        <tr class="tableRow_even">
            <td class="first"></td>
            <td>ACTIVE ITEM</td>
            <td>ACTIVE ITEM</td>
            <td class="last"><span class="unavailable">INACTIVE ITEM</span>

            </td>
        </tr>
        <tr class="tableRow_odd">
            <td class="first"></td>
            <td>ACTIVE ITEM</td>
            <td><span class="unavailable">INACTIVE ITEM</span>

            </td>
            <td class="last"><span class="unavailable">INACTIVE ITEM</span>

            </td>
        </tr>
        <tr class="tableRow_even">
            <td class="first"></td>
            <td>ACTIVE ITEM</td>
            <td><span class="unavailable">INACTIVE ITEM</span>

            </td>
            <td class="last"><span class="unavailable">INACTIVE ITEM</span>

            </td>
        </tr>
        <tr class="tableRow_odd">
            <td class="first"></td>
            <td>ACTIVE ITEM</td>
            <td><span class="unavailable">INACTIVE ITEM</span>

            </td>
            <td class="last"><span class="unavailable">INACTIVE ITEM</span>

            </td>
        </tr>
        </table>    <span class="itemOverlay"></span></span>
    </li>
</ul>

CSS:

body { padding: 15px }
/* Class Setups */


.accordion {


    width: 500px;


    margin: 0 auto;


    overflow: hidden;


    -webkit-border-radius: 5px;


    -khtml-border-radius: 5px;


    -moz-border-radius: 5px;


    -o-border-radius: 5px;


    border-radius: 5px;


}


.accordion li {


    overflow: hidden;


    position: relative;


}


.accordion li h3 {


    color: #fff;


    font-weight: 100;


    padding: 7px 0 7px 12px;


    border-bottom: 1px solid #4d82ae;


    cursor: pointer;


    font-size: 19px;


    background: #5d8ebd;


    /* Old browsers */


    background: -moz-linear-gradient(top, #5d8ebd 0%, #659ecb 100%);


    /* FF3.6+ */


    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d8ebd), color-stop(100%, #659ecb));


    /* Chrome,Safari4+ */


    background: -webkit-linear-gradient(top, #5d8ebd 0%, #659ecb 100%);


    /* Chrome10+,Safari5.1+ */


    background: -o-linear-gradient(top, #5d8ebd 0%, #659ecb 100%);


    /* Opera 11.10+ */


    background: -ms-linear-gradient(top, #5d8ebd 0%, #659ecb 100%);


    /* IE10+ */


    background: linear-gradient(to bottom, #5d8ebd 0%, #659ecb 100%);


    /* W3C */


    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d8ebd', endColorstr='#659ecb', GradientType=0);


    /* IE6-9 */


}


.accordionContent a {


    display: block;


    position: relative;


    z-index: 999;


}


.accordionContent > * {


    padding: 15px;


    width: 100%;


    height: 100%;


    position: relative;


}


.accordionContent {


    display: block;


    width: 100%;


    height: 100%;


    padding: 0;


    position: relative;


}


.accordionContent > table {


    text-align: center;


    padding: 0;


    font-family:"Open Sans", sans-serif;


    text-shadow: 0px 1px 0px #fff;


    filter: dropshadow(color=#fff, offx=0, offy=1);


}


.accordionContent > table td {


    vertical-align: middle;


    border-right: 2px groove #eee;


    font-size: 12px;


}


.accordionContent > table td {


    padding: 10px 5px;


    font-weight: 400;


}


.accordionContent .itemOverlay {


    position: absolute;


    left: 0;


    bottom: 0;


    width: 100%;


    height: 100%;


    background: transparent !important;


    padding : 0;


    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .45);


    -khtml-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .45);


    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .45);


    -o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .45);


    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .45);


}


.accordionContent > table td span.unavailable {


    font-weight: 200;


}


.accordionContent > table td.last {


    border-right: none;


}


.accordionContent > table tr.tableRow_even {


    background: #eee;


}


.accordionContent > table tr.tableHeader td {


    background: #d2d2d2;


    color: #282828;


    height: 50px;


    font-weight: bold;


    font-size: 12px;


    padding: 0;


}


.accordionContent > table tr.tableHeader td {


}


.accordionContent > table tr.tableHeader td span {


    display: block;


    font-size: 10px;


}
4

2 に答える 2

2

あなたが何をしようとしているのか完全にはわかりませんが、テーブル内の個々のセルの高さを変更したいようですが、それは不可能だと思います。行の高さは変更できますが、個々のセルでは変更できません。

これを行うには、リスト、div、さらには他の html コンテナーをいくつかの JS および CSS と混合して使用できます。

編集、問題を解決した答え:

「高さ: 100%;」を削除します。from.accordionContent > *

CSS でパーセンテージを使用する場合、ブラウザーは項目自体の高さではなく親の高さを使用するため (もちろん、私が間違っていなければ)、overflow:hidden; と組み合わせます。それは最後の行を荒廃させるでしょう。

于 2013-01-18T01:42:57.827 に答える
0

修理済み!

Cssは悪役でした。

削除 された高さ: 100%; .accordionContentクラスから。

作業フィドルを参照してください:

http://jsfiddle.net/dsQtP/7/

.accordionContent {
    display: block;
    width: 100%;
    /* height: 100%; */
    padding: 0;
    position: relative;
}
于 2013-01-18T02:18:36.623 に答える