title: How can a <label> completely fill its parent <td> in column structure?
body: <p>I am trying something quite similar to <a href="https://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td">How can a &lt;label&gt; completely fill its parent &lt;td&gt;?</a> but am having trouble getting the lable to take up the full size of the td (effectively making the td my button).</p>
  
  <p>That solution above doesn't work correctly in Chrome, though.</p>
  
  <p>I am using labels in order to have some boxes display further down on the page according to the user selection using javasscript:</p>
  
  <pre><code>$(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();
          }
      });
  });
  </code></pre>
  
  <p>I have created a fiddle at <a href="https://jsfiddle.net/fuawg8y3/1/" rel="nofollow noreferrer">https://jsfiddle.net/fuawg8y3/1/</a> showing with the red borders how the label does not take up the full height or width of the containing td. </p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>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  */
  }
  </code></pre>
  
  <p>And here is my html:</p>
  
  <pre><code>&lt;div class="top"&gt;
    &lt;table id="actual-table"
           &lt;tr&gt;
            &lt;td&gt;&lt;input id="2" type="radio" value="hd" name="sted"&gt;&lt;label class="helpdesklabel" for="2"&gt;&lt;strong&gt;Column 1&lt;/strong&gt;&lt;br&gt;Some text. But not so much.&lt;/label&gt;&lt;/td&gt;
  
            &lt;td&gt;&lt;input type="radio" name="sted" value="ssk" id="1"&gt;&lt;label class="ssklabel" for="1"&gt;&lt;strong&gt;Column 2&lt;/strong&gt;&lt;br&gt;Some text.&lt;br&gt;And quite a lot of it.&lt;br&gt;And then some.&lt;br&gt;And even more&lt;/label&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any help in achieving this would be much appreciated.</p>