How can a completely fill its parent in column structure?

Question

I am trying something quite similar to How can a <label> completely fill its parent <td>? but am having trouble getting the lable to take up the full size of the td (effectively making the td my button).

That solution above doesn't work correctly in Chrome, though.

I am using labels in order to have some boxes display further down on the page according to the user selection using javasscript:

$(document).ready(function(){
   $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="ssk"){
            $(".box").not(".ssk").hide();
            $(".ssk").show();
        }
        if($(this).attr("value")=="hd"){
            $(".box").not(".hd").hide();
            $(".hd").show();
        }
    });
});

I have created a fiddle at https://jsfiddle.net/fuawg8y3/1/ showing with the red borders how the label does not take up the full height or width of the containing td.

Here is my CSS:

div.top {
float:left;
padding-right: 20px;
}

#actual-table { border-collapse: collapse; }
#actual-table td {
  width: 50%;
  height:100%;
  padding: 10px;
  vertical-align: top;
}
#actual-table td:nth-child(even) {
  background: blue;
}
#actual-table td:nth-child(odd) {
  background: green;
}
#actual-table td:hover {
    background: #A8CAB4;
}
#actual-table td:active {
    background: #8bb89b;
}

.top input[type="radio"] {
position: absolute;
left: -5000px;
}

.top label {
    display: block; 
    border: 1px solid #f00;
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}

And here is my html:

<div class="top">
  <table id="actual-table"
         <tr>
          <td><input id="2" type="radio" value="hd" name="sted"><label class="helpdesklabel" for="2"><strong>Column 1</strong><br>Some text. But not so much.</label></td>

          <td><input type="radio" name="sted" value="ssk" id="1"><label class="ssklabel" for="1"><strong>Column 2</strong><br>Some text.<br>And quite a lot of it.<br>And then some.<br>And even more</label></td>
</tr>
</table>
</div>

Ideally I would like to keep my padding on the text in relation to the td border, but have the label extend to the full width and height of the containing td.

Any help in achieving this would be much appreciated.

Answer 1

You need to have a height set as a point-of-reference. In practice, any explicit height will do it and the solution from the question you linked to was to give the tr a height of 1px (which it automatically increases to the height of the tds).

Add this to your style sheet:

/* http://stackoverflow.com/a/3081445/557019 */
#actual-table tr { height: 1px; }

I've created a fiddle so you can see the result.

Update

Chrome doesn't seem to like that hack. Since you're using jQuery, you can loop over the table cells and set their height to their own current height.

$('#actual-table td').each(function () {
    $(this).height($(this).height());
});

I've updated the fiddle to show the results.