html css 表格自动高度,HTML/CSS - 具有固定高度的容器中表格单元格的高度不一致...

我有一个使用HTML/CSS设置的表格，它位于正在变成手风琴的UL的LI元素中。问题是，当LI元素动画到特定高度时，它会改变表格单元格的高度，使最后一个元素隐藏起来。HTML/CSS - 具有固定高度的容器中表格单元格的高度不一致

如果将固定高度从父LI元素中移除，但是这对手风琴起作用是必需的，则此问题不存在。有没有办法确保单元总是相同的高度，无论父容器高度属性如何？

我已经设置了下面的JS小提琴来显示问题。默认情况下，它具有运行的手风琴功能。如果将其取下，则可以在将高度添加到父容器之前按照原样查看表格。

由于手风琴默认为关闭所有元素，因此您必须点击标题栏上的“表”才能打开表格并查看内容。

这里是为那些谁希望看到它的代码：

HTML：

• Table

  HEADER	TITLESUBTITLE	TITLESUBTITLE	TITLESUBTITLE
  ACTIVE ITEM	ACTIVE ITEM	ACTIVE ITEM	ACTIVE ITEM
  	ACTIVE ITEM	ACTIVE ITEM	INACTIVE ITEM
  	ACTIVE ITEM	INACTIVE ITEM	INACTIVE ITEM
  	ACTIVE ITEM	INACTIVE ITEM	INACTIVE ITEM
  	ACTIVE ITEM	INACTIVE ITEM	INACTIVE ITEM

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;

}