title: How can a <label> completely fill its parent <td>?
body: <p>Here is the relevant code (doesn't work):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;testing td checkboxes&lt;/title&gt;
  &lt;style type="text/css"&gt;
  td { border: 1px solid #000; }
  label { border: 1px solid #f00; width: 100%; height: 100% }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Some column title&lt;/td&gt;
      &lt;td&gt;Another column title&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Value 1&lt;br&gt;(a bit more info)&lt;/td&gt;
      &lt;td&gt;&lt;label&gt;&lt;input type="checkbox" /&gt; &amp;nbsp;&lt;/label&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Value 2&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The reason is that I want a click anywhere in the table cell to check/uncheck the checkbox.</p>
  
  <p>edits:
  By the way, no javascript solutions please, for accessibility reasons.
  I tried using display: block; but that only works for the width, not for the height</p>