How can a <label> completely fill its parent <td>? <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>