这是相关代码(不起作用):
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
原因是我想在表格单元格中的任意位置单击以选中/取消选中复选框。
编辑: 顺便说一句，出于可访问性原因，请不要使用 javascript 解决方案。 我尝试使用 display: block;但这只适用于宽度，不适用于高度
最佳答案
我只在 IE 6、7、8 和 FF 3.6.3 中测试过。
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
tr {
height: 1px;
}
td {
border: 1px solid #000;
height: 100%;
}
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 */
}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
</table>
</body>
</html>
这里的主要技巧是定义行的高度，这样我们就可以在它们的子项(单元格)上使用 100% 的高度，反过来，在单元格的子项(标签)上使用 100% 的高度。这样，无论一个单元格中有多少内容，它都会强行扩展其父行，其兄弟单元格将随之而来。由于标签的高度为已定义其父级的 100%，因此它也会垂直扩展。
第二个也是最后一个技巧(但同样重要)是对 min-height 属性使用 CSS hack，如评论中所述。
关于css - <label> 如何完全填充其父 <td>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2841484/