以下是相关代码（不起作用）：
<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;但这只适用于宽度，而不适用于高度
答案 0 :(得分：25)
我只在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％，其高度已定义，因此它也会垂直扩展。
第二个也是最后一个技巧（但同样重要）是使用CSS hack作为min-height属性，如评论中所述。
希望这有帮助！
答案 1 :(得分：19)
默认情况下，标签是内联元素，因此设置宽度和高度不会产生任何效果。
label { display: block; }
会这样做。
（但是，将标签放在附近的应用程序，而不是显式使用for的做法在IE中不起作用。）
答案 2 :(得分：4)
您应用标签的方式并不能使表单元素完全可访问。标签应该应用于与表单元素关联的文本，而不仅仅是表单元素。但是在表单元素上添加另一个标签以使TD内的整个区域可点击是没有错的。这实际上是可取的，以便为有运动障碍的人提供更大的点击区域。 <label for="whatever">Your label</label>针对使用屏幕阅读器浏览Web表单的人。
此外，使用JavaScript增强可访问性并不是什么难以接受的。可以使用JavaScript，只要它优雅地降级并且不会阻止屏幕阅读器阅读页面。此外，没有办法使用CSS来填充IE旧版本（仍然被大量用户使用）的单元格高度，而没有真正搞砸了页面的外观。这就是说，你应该使用jQuery来填充整个TD。我不说JavaScript的原因是jQuery通过隐藏大量复杂的编码来帮助你避免许多麻烦，这些编码是在大多数浏览器中使用的必要条件。
以下是支持jQuery的完全跨浏览器的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Accessible Checkboxes</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table > tbody tr").each(function() { // Loop through all table rows
var Highest=0; // We want to find the highest TD... start at zero
var ThisHeight=0; // Initiate the temporary height variable (it will hold the height as an integer)
$($(this).children('td')).each(function() { // Loop through all the children TDs in order to find the highest
ThisHeight=parseInt($(this).height()); // Grab the height of the current TD
if (ThisHeight>Highest) { // Is this TD the highest?
Highest=ThisHeight; // We got a new highest value
}
});
$(this).children('td').css('height',Highest+'px'); // Set all TDs on the row to the highest TD height
});
});
</script>
<style type="text/css">
table {
border: 1px solid #000;
}
td, label {
height: 100%;
min-height: 100%;
}
th {
text-align: left;
}
td, th {
border: 1px solid #000;
}
label {
display: block;
}
</style>
</head>
<body>
<form action="whatever.shtml" method="post" enctype="multipart/form-data">
<table cellspacing="3" cellpadding="0" summary="A description of what's in the table.">
<thead>
<tr>
<th scope="col">Some column title</th>
<th scope="col">Another column title</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><label for="value1">Value 1<br />(a bit more info)</label></td>
<td><label><input id="value1" type="checkbox" /> </label></td>
</tr>
<tr>
<td scope="row"><label for="value2">Value 2</label></td>
<td><label><input id="value2" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
您需要下载jQuery并将jquery.min.js文件放在名为js的文件夹下。
正如您在代码中看到的那样，通过添加table summary，thead，th，scope，label for，表单已完全可访问当然，这不是你提出的问题的一部分，但我补充说，这是一个额外的奖励。
答案 3 :(得分：1)
此代码可以满足您的需求，并且可以在IE7 +，FF，Google Chrome，Opera和Safari上进行测试：
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td{border:1px solid #000;width:200px;height:200px;}
label{display:block;border:1px solid #f00;width:198px;height:198px;}
</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>
如果你的问题没有解决，希望这能解决它！ ;）
答案 4 :(得分：1)
这个答案有点“在那里” - 因为它是有效的HTML你必须定义自己的DTD，并且无论如何它在IE或Opera中都不起作用（在Firefox中有效）。所以它无论如何都不是一个可行的解决方案，但我认为无论如何我只是为了感兴趣而分享：
HTML：
<table>
<tr>
<td>Some content</td>
<label><input type="checkbox" /></label> <!-- no TD -->
</tr>
<tr>
<td>Some<br />multi-line<br />content</td>
<label><input type="checkbox" /></label>
</tr>
</table>
CSS：
label { display: table-cell; }
答案 5 :(得分：1)
我没有发现其他答案在当前浏览器中有效（2017），但绝对定位标签对我有用：
https://jsfiddle.net/4w75260j/5/
<html>
<head>
<style type="text/css">
td.checkbox {
position: relative;
}
td.checkbox label {
/* Take up full width/height */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Ensure the checkbox is centered */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Checkboxes</td>
<td>Text</td>
</tr>
<tr>
<td class="checkbox"><label><input type="checkbox" /></label></td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
</table>
</body>
</html>
请注意，此解决方案使用flexbox将复选框居中;如果您要定位旧版浏览器，则可能需要尝试transform style of centering。
答案 6 :(得分：0)
我希望点击表格单元格中的任意位置
<tr onclick="alert('process click here');"> ... </tr>
答案 7 :(得分：0)
尝试使用此标签作为标签
label {
border:1px solid #FF0000;
display:block;
height:35px;
}
以下是现场演示http://jsbin.com/ehoke3/2/
答案 8 :(得分：0)
在“价值1”的行中，您不仅拥有“更多信息”，还包括休息时间。在我看来，您真正需要做的就是在右栏中的任何标签中加入<br>，以便左栏中的内容包含<br>。另外，显然<label>需要将display CSS属性设置为block。
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display: block;}
</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" /> <br> </label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>
一个注意事项：在过去10年中，你不会在所有主流浏览器中获得完美的工作性能 - 咳嗽IE6 - 而不是诉诸像JavaScript这样的东西。我相信我的解决方案是最好的解决方案，而无需借助JavaScript。
答案 9 :(得分：0)
以下解决方案：
<label>完全填满了<td>身高
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display:block; min-height:2.3em;}
</style>
</head>
<body>
<table style="table-layout:fixed">
<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" style="vertical-align:-50%" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
说明：
display:block使<label>取<td>全宽min-height:2.3em;使<label>取<td>个全高（最小高度略高于两行，因为行的第一个单元格中有两行;你可能需要增加，例如我在我的代码中使用3.3em）vertical-align:-50%使复选框在单元格的中心垂直对齐（仅当单元格内容跨越的行数少于行的第一个单元格时才需要这样做）答案 10 :(得分：0)
我发现使用display: table对我有用。我尝试了（先前建议的）display: table-cell，但没有用。
td label {
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
}