<label> 如何在列结构中完全填充其父 <td> ？

Question

我正在尝试与How can a <label> completely fill its parent <td>? 非常相似的东西，但无法让标签占据 td 的完整大小（实际上使 td 成为我的按钮）。

不过，上述解决方案在 Chrome 中无法正常工作。

我正在使用标签，以便根据用户使用 javasscript 的选择在页面上进一步显示一些框：

$(document).ready(function(){
   $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="ssk"){
            $(".box").not(".ssk").hide();
            $(".ssk").show();
        }
        if($(this).attr("value")=="hd"){
            $(".box").not(".hd").hide();
            $(".hd").show();
        }
    });
});

我在https://jsfiddle.net/fuawg8y3/1/ 创建了一个小提琴，用红色边框显示标签如何不占据包含 td 的全部高度或宽度。

这是我的 CSS：

div.top {
float:left;
padding-right: 20px;
}

#actual-table { border-collapse: collapse; }
#actual-table td {
  width: 50%;
  height:100%;
  padding: 10px;
  vertical-align: top;
}
#actual-table td:nth-child(even) {
  background: blue;
}
#actual-table td:nth-child(odd) {
  background: green;
}
#actual-table td:hover {
    background: #A8CAB4;
}
#actual-table td:active {
    background: #8bb89b;
}

.top input[type="radio"] {
position: absolute;
left: -5000px;
}

.top 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  */
}

这是我的html：

<div class="top">
  <table id="actual-table"
         <tr>
          <td><input id="2" type="radio" value="hd" name="sted"><label class="helpdesklabel" for="2"><strong>Column 1</strong><br>Some text. But not so much.</label></td>

          <td><input type="radio" name="sted" value="ssk" id="1"><label class="ssklabel" for="1"><strong>Column 2</strong><br>Some text.<br>And quite a lot of it.<br>And then some.<br>And even more</label></td>
</tr>
</table>
</div>

理想情况下，我希望将我的填充保留在与 td 边框相关的文本上，但让标签扩展到包含 td 的整个宽度和高度。

我们将不胜感激。

Answer 1

您需要将高度设置为参考点。在实践中，任何明确的高度都可以做到这一点，您链接到的问题的解决方案是给 tr 一个高度 1px （它会自动增加到 tds 的高度）。

将此添加到您的样式表中：

/* http://stackoverflow.com/a/3081445/557019 */
#actual-table tr { height: 1px; }

我创建了一个fiddle，以便您查看结果。

更新

Chrome 似乎不喜欢这种 hack。由于您使用的是 jQuery，因此您可以遍历表格单元格并将它们的高度设置为它们自己的当前高度。

$('#actual-table td').each(function () {
    $(this).height($(this).height());
});

我已经updated the fiddle 显示结果。