CODEWITHSUNDEEP
csshtml-table
cavillac
cavillac

Reputation: 1311

Make a Table take up 100% of containing td

<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.

Upvotes: 2

Views: 341

Answers (2)

cavillac
cavillac

Reputation: 1311

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.

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

This is the best I could do: http://jsfiddle.net/jc5qf/2/

Hope it gets you going down the right path.

Upvotes: 1

Related Questions