CODEWITHSUNDEEP
htmlcsscss-tables
Q D
Q D

Reputation: 105

The height of an element inside table cell is 0 in IE

I have absolutely positioned elements inside table cells. All the inner elements should have the height of the parent td. For some reason I am not able to achieve this with IE.

I am also dynamically adding elements to cells that are empty. I was able to get the layout right with fixing the positioning values in IE but once I added a new inner element all the inner elements lost their height. If I, for example, resized the window the inner elements regained their original proper height.

Here's an example of the situation with IE where the height of the inner elements is initially 0. Even though it should be the same as the parent td's.

table td {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    vertical-align: top;
}

table div.container {    
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: green;    
}

Example in jsfiddle: http://jsfiddle.net/Visa/opdfg6t6/56/

Upvotes: 1

Views: 333

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28563

Put a non breaking space ( ) in your div and then you'll be right. See demo

$('.second').bind('click', function() {
    var element = $('<div/>', {
        'class': 'container'    
    });
    $(this).append(element);
});
.container {
    position: relative;
    height: 100%;
    width: 100%;
}

table {
   border-spacing: 0;
   width: 150px;
   table-layout: fixed;
   position: relative;
}

table td {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    vertical-align: top;
    background-clip: padding-box;
}

table div.container {    
    position: static;
    vertical-align:top;
    width: 100%;
    height: auto;
    background-color: green;    
}
<div class="container">
    <table>
        <tbody>
            <tr>
                <td class="header">
                    Header
                </td>
                <td class="first">
                    <div class="container">
                        &nbsp;
                    </div>                                
                </td>
                <td class="second">
                    
                </td>
            </tr>
        </tbody>    
    </table>
</div>

Upvotes: 1

Related Questions