如何将< label>完全填充其父级< td> ;? [英] How can a <label> completely fill its parent <td>?
问题描述
以下是相关代码（无效）：
< html&
< head>
< title> testing td checkboxes< / title>
< style type =text / css>
td {border：1px solid＃000; }
label {border：1px solid＃f00;宽度：100％; height：100％}
< / style>
< / head>
< body>
< table>
< tr>
< td>一些列标题< / td>
< td>另一栏标题< / td>
< / tr>
< tr>
< td>值1< br>（更多信息）< / td>
< td>< label>< input type =checkbox/> & nbsp;< / label>< / td>
< / tr>
< tr>
< td>值2< / td>
< td>< input type =checkbox/>< / td>
< / tr>
< / table>
< / body>
< / html>
原因是我想在表格单元格中的任意位置单击以检查/取消选中复选框。 / p>
edits：
顺便说一下，无法访问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％; / *用于支持最小高度的最新浏览器* /
height：auto！important; / *用于较新的IE版本* /
height：100％; / * IE6不忽略的唯一与高度相关的属性* /
}
< / style>
< / head>
< body>
< table>
< tr>
< td>一些列标题< / td>
< td>另一栏标题< / td>
< / tr>
< tr>
< td>值1< br>（更多信息）< / td>
< td>< label>< input type =checkbox/> & nbsp;< / label>< / td>
< / tr>
< / table>
< / body>
< / html>
这里的主要技巧是定义行的高度，所以我们可以使用100％他们的孩子（细胞），反过来，100％的高度在细胞的孩子（标签）。这样，无论单元格中有多少内容，它将强制扩展其父行，并且其兄弟单元格将跟随。
第二个也是最后一个窍门（但同样重要的）是，它的父元素的高度为100％使用CSS hack作为min-height属性，如注释中所述。
希望这有助于！
Here is the relevant code (doesn't work):
<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>
The reason is that I want a click anywhere in the table cell to check/uncheck the checkbox.
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
I have only tested this in IE 6, 7, 8 and 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>
The main trick here is to define the height of the rows so we can use a 100% height on their children (the cells) and in turns, a 100% height on the cells' children (the labels). This way, no matter how much content there is in a cell, it will forcibly expand its parent row, and its sibling cells will follow. Since the label has a 100% height of its parent which has its height defined, it will also expand vertically.
The second and last trick (but just as important) is to use a CSS hack for the min-height attribute, as explained in the comments.
Hope this helps !
这篇关于如何将< label>完全填充其父级< td> ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
