HTML/CSS を使用してセットアップされたテーブルがあり、アコーディオンに変換される UL の LI 要素内にあります。問題は、LI 要素が特定の高さにアニメーション化されると、表のセルの高さが変更され、最後のセルがビューから非表示になることです。
親 LI 要素から固定高さが削除されている場合、この問題は発生しませんが、これはアコーディオンが機能するために必要です。親コンテナの高さ属性に関係なく、セルが常に同じ高さであることを確認する方法はありますか?
問題を示すために、次の JS Fiddle を設定しました。デフォルトでは、アコーディオン機能が実行されています。それを外すと、親コンテナに高さが追加される前の状態のテーブルが表示されます。
アコーディオンのデフォルトではすべての要素が閉じられているため、テーブルを開いてコンテンツを表示するには、「テーブル」と表示されているタイトル バーをクリックする必要があります。
見たい人のためのコードは次のとおりです。
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;
}