Question

<style>
        .topTable
        {
            border-top:1px solid #333333;
            border-right:1px solid #333333;
        }

        .topTable td, th
        {
            border-left:1px solid #333333;
            border-bottom:1px solid #333333;
        }

        .topTable .inner
        {
            border-width:0px;
            position:relative;
            top:0px;
            left:0px;
            height:100%;
            width:100%;
        }
        .topTable .container
        {
            padding:0px;
            border-width:0px;
            position:relative;
        }
    </style>

    <table cellpadding="4" class="topTable" cellspacing="0" style="background-color:#f0f0f0;">
        <tr>
           <th>Option A</th>
           <td class="container">
                <table cellpadding="4" class="inner" cellspacing="0" style="background-color:#f0a0a0;">
                     <tr>
                        <td>Part 1</td>
                        <td>Part 2</td>
                     </tr>
                </table>
           </td>
           <td class="container">
                <table cellpadding="4" class="inner" cellspacing="0" style="background-color:#a0f0a0;">
                     <tr>
                        <td>Part 3</td>
                     </tr>
                     <tr>
                        <td>Part 3</td>
                     </tr>
                </table>
           </td>
           <td>Done</td>
        </tr>
    </table>

I need those tables within the TDs to be height:100% and nothing seems to work. I can’t use rowspan in this case as the data will be dynamic in each sub table. I need some CSS that will force those tables to take up the full height of the td they’re stored in. I thought this would be easy as I’m dealing with block elements but I must be missing something because it’s simply not working no matter what tricks I try.

Answer 1

Found a workaround using jQuery.

Someone had posted something similar to this and I modified it to meet these needs:

$(function () {
        $('td.container').each(function () {
            var $this = $(this);
            var panelheight = $this.height();
            $this.children('table.inner').height(panelheight);
        })
    });

Just have to make the class on each containing td be ‘container’ and the table inside it that needs to stretch to match the height of that container to ‘inner’ This jQuery will take over from there.