这是相关代码(不起作用):
<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; 但这只适用于宽度,而不适用于高度
Val*_*sel 27
我只在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属性,如注释中所述.
希望这可以帮助 !
bob*_*nce 19
默认情况下,标签是内联元素,因此设置宽度和高度不起作用.
label { display: block; }
会这样做.
(然而,把标签的做法各地的复选框它应该与相关的,而不是明确地使用for,在IE浏览器无法正常工作.)