Full height label

http://stackoverflow.com/questions/34154686/how-can-a-label-completely-fill-its-parent-td-in-column-structure

by James Long

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<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>

CSS

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

#actual-table { border-collapse: collapse; }
#actual-table tr { height: 1px; } /* New */
#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  */
}

JavaScript

$(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();
        }
    });
  // New
  $('#actual-table td').each(function () {
    $(this).height($(this).height());
  });
});