HTML/CSS - Inconsistent height of table cells in container with a fixed height

Question

I have a table set up using HTML/CSS, and it is inside an LI element of a UL that is being turned into an accordion. The problem is, that when the LI element is animated to a specific height, it alters the height of the table cells, making the last one hidden from view.

This problem does not exist if the fixed height is removed from the parent LI element, but this is required for the accordion to function. Is there a way to make sure the cells are always the same height regardless of the parent containers height attribute?

I have set up the following JS Fiddle to show the problem. By default it has the accordion functionality running. If you take it off, you can see the table the way it is before the height is added to the parent container.

As the accordion defaults to having all elements closed, you will have to click on the title bar that says "Table" in order to open the table and see the content.

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

Here is the code for those who wish to see it:

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;


}

Answer 1

I am not completly sure what you are trying to do, but it seems like you wish to change the height on individual cells in a table which I believe is not possible. You can change the height in a row, but not an individual cell.

To do that you could use a list, divs and even other html containers mixed with some JS and CSS.

Edit, the answer that fixed the problem:

Remove "height: 100%;" from.accordionContent > *

When using percentages in CSS the browser uses the height of the parent instead of the height of the item itself (if I am not mistaken of course), thus combined with overflow:hidden; it would make the last row disrepair.

Answer 2

Fixed!

Css was the villain.

Removed height: 100%; from .accordionContent class.

See the working fiddle:

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

.accordionContent {
    display: block;
    width: 100%;
    /* height: 100%; */
    padding: 0;
    position: relative;
}