CSS <label> 如何完全填充其父 <td>？

Question

提问by Shawn

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" /> &nbsp;</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

编辑：顺便说一下，出于可访问性的原因，请不要使用 javascript 解决方案。我尝试使用 display: block; 但这仅适用于宽度，不适用于高度

Answer 1

采纳答案by Valentin Flachsel

I have only tested this in IE 6, 7, 8 and FF 3.6.3.

我只在 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" /> &nbsp;</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.

这里的主要技巧是定义行的高度，这样我们就可以在他们的孩子（单元格）上使用 100% 的高度，反过来，在单元格的孩子（标签）上使用 100% 的高度。这样，无论一个单元格中有多少内容，它都会强制扩展其父行，其兄弟单元格也会随之而来。由于标签具有其父级的 100% 高度，其高度已定义，因此它也会垂直扩展。

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.

第二个也是最后一个技巧（但同样重要）是对 min-height 属性使用 CSS hack，如评论中所述。

Hope this helps !

希望这可以帮助！

Answer 2

回答by bobince

Labels are inline elements by default, so setting the width and height does nothing.

默认情况下标签是内联元素，因此设置宽度和高度没有任何作用。

label { display: block; }

Would do it.

会做的。

(However, the practice of putting the label aroundthe checkbox it is supposed to be associated with, rather than explicitly using for, doesn't work in IE.)

（但是，将标签放在它应该关联的复选框周围而不是明确使用的做法for在 IE 中不起作用。）

Answer 3

回答by Gert Grenander

The way you're applying labels doesn't make the form elements fully accessible. The label should be applied on the text associated with the form element, not just the form element. But there's nothing wrong with adding another label over the form element in order to make the entire area inside the TDclickable. This is actually desirable in order to give people with motor disabilities a bigger area to click. The <label for="whatever">Your label</label>is aimed for people who use screen readers to go through the Web form.

您应用标签的方式不会使表单元素完全可访问。标签应该应用于与表单元素关联的文本，而不仅仅是表单元素。但是在表单元素上添加另一个标签以使整个区域TD都可点击并没有错。这实际上是可取的，以便为有运动障碍的人提供更大的点击区域。它<label for="whatever">Your label</label>的目标是使用屏幕阅读器浏览 Web 表单的人。

Also, there's nothing inaccessible about using JavaScript for enhancing accessibility. JavaScript can be used as long as it degrades gracefully and doesn't stops screen readers from reading the page. Also, there's no way to use CSS to fill the cell height on the older versions of IE (which are still in use by a big number of users) without royally screwing up the look of the page. This said, you should use jQuery to fill the entire TD. The reason I don't say JavaScript is that jQuery saves you a lot of headaches by hiding a lot of the complex coding that's necessary to make this work across the great majority of browsers.

此外，使用 JavaScript 增强可访问性也没有什么不可访问的。可以使用 JavaScript，只要它优雅地降级并且不会阻止屏幕阅读器阅读页面。此外，没有办法使用 CSS 来填充旧版本 IE（仍然被大量用户使用）上的单元格高度，而不会完全搞砸页面的外观。这就是说，您应该使用 jQuery 来填充整个TD. 我不说 JavaScript 的原因是，jQuery 隐藏了许多复杂的代码，让您在大多数浏览器上都能正常工作，从而为您省去了很多麻烦。

Here's the fully cross browser accessible jQuery enabled code:

这是完全跨浏览器可访问的 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" /> &nbsp;</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>

You'll need to download jQueryand put the jquery.min.jsfile under a folder named js.

您需要下载jQuery并将jquery.min.js文件放在名为js.

As you can see in the code, the form has been made fully accessible by adding a table summary, thead, th, scope, label foretc. Sure, it wasn't part of what you asked, but I added that as an extra bonus.

正如你可以在代码中看到，该表格已经取得了完全无障碍加入了table summary，thead，th，scope，label for等当然，这是不是你问的一部分，但我补充说，作为一个额外的奖金。

Answer 4

回答by Alan

I did not find that the other answers worked in current browsers (2017), but absolutely positioning the label worked for me:

我没有发现其他答案在当前浏览器（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>

Note that this solution uses flexbox to center the checkbox; if you're targeting older browsers you may want to try the transform style of centering.

请注意，此解决方案使用 flexbox 将复选框居中；如果你的目标是旧浏览器，你可能想尝试centering的转换风格。

Answer 5

回答by Zuul

This code does what you want and it's tested on IE7+, FF, Google Chrome, Opera and Safari:

这段代码可以满足您的需求，并且已经在 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" /> &nbsp;</label></td>
            </tr>
            <tr>
                <td>Value 2</td>
                <td><input type="checkbox" /></td>
            </tr>
        </table>

    </body>
</html>

If your problem wasn't solved, hope this solves it! ;)

如果你的问题没有解决，希望这能解决它！;)

Answer 6

回答by nickf

This answer is a bit "out there" - for it to be valid HTML you'd have to define your own DTD, and in any case it doesn't work in IE or Opera (works in Firefox). So it's not a viable solution by any measure, but I thought I'd share anyway just for interest:

这个答案有点“在那里” - 要使其成为有效的 HTML，您必须定义自己的 DTD，并且无论如何它在 IE 或 Opera 中不起作用（在 Firefox 中起作用）。因此，无论如何，这都不是一个可行的解决方案，但我想无论如何我都会为了兴趣而分享：

The HTML:

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>

The CSS:

CSS：

label { display: table-cell; }

Answer 7

回答by Julien Kronegg

The solution below:

下面的解决方案：

has <label>which fills entirely the <td>height
supports any cell height (i.e. no fixed height in pixels)
does only on CSS (i.e. no JavaScript)
is multibrowser (MSIE 7/8/9/10/11, Firefox 42, Chrome 46, Seamonkey 2.39, Opera 33, Safari 5.1.7)

有<label>完全填满<td>高度
支持任何单元格高度（即没有以像素为单位的固定高度）
仅在 CSS 上执行（即没有 JavaScript）
是多浏览器（MSIE 7/8/9/10/11、Firefox 42、Chrome 46、Seamonkey 2.39、Opera 33、Safari 5.1.7）

<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%" />&nbsp;</label></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td><input type="checkbox" /></td>
  </tr>
</table>
</body>
</html>

Explanations:

说明：

the display:blockmakes the <label>to take the <td>full width
the min-height:2.3em;makes the <label>to take the <td>full height (the minimum height a little bit higher than two lines as there are two lines in the first cell of the row; you may need to increase, e.g. I use 3.3em in my code)
the vertical-align:-50%makes the checkbox to be aligned vertically at the center of the cell (this is only required if the cell content spans over less lines than the first cell of the row)

将display:block使得<label>采取<td>全宽
这min-height:2.3em;使得<label>取<td>全高（最小高度比两行高一点，因为行的第一个单元格中有两行；您可能需要增加，例如我在我的代码中使用 3.3em）
在vertical-align:-50%使复选框被垂直于电池的中心对准（这仅要求如果小区内容跨越更少行数比列的第一单元）

Answer 8

回答by balexandre

I want a click anywhere in the table cell

我想在表格单元格中的任意位置单击

<tr onclick="alert('process click here');"> ... </tr>

Answer 9

回答by Pablo

Try this CSS for your label

为你的标签试试这个 CSS

label  {
 border:1px solid #FF0000;
 display:block;
 height:35px;
}

Here is the live Demo http://jsbin.com/ehoke3/2/

这是现场演示http://jsbin.com/ehoke3/2/

Answer 10

回答by artlung

In your row with "Value 1" you don't just have "a bit more info" you also include a break. It seems to me that all you really need to do is include a <br>in any label in the right column for when the content in the left column includes a <br>. Also, obviously <label>needs to have a displayCSS attribute set to block.

在您的“值 1”行中，您不仅有“更多信息”，还包括休息时间。在我看来<br>，当左列中的内容包含<br>. 此外，显然<label>需要将displayCSS 属性设置为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" /> &nbsp;<br>&nbsp;</label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>

One note: you're not going to get perfect workalike performance in all the major browsers from the last 10 years--cough IE6--without resorting to things like JavaScript. I believe my solution is the best solution without resorting to JavaScript.

一个注意事项：如果不求助于 JavaScript 之类的东西，您将无法在过去 10 年的所有主要浏览器中获得完美的类似工作性能——IE6 咳咳。我相信我的解决方案是最好的解决方案，而无需求助于 JavaScript。

CSS <label> 如何完全填充其父 <td>？

提问by Shawn

采纳答案by Valentin Flachsel

回答by bobince

回答by Gert Grenander

回答by Alan

回答by Zuul

回答by nickf

回答by Julien Kronegg

回答by balexandre

回答by Pablo

回答by artlung

相关推荐

最近更新

标签

CSS <label> 如何完全填充其父 <td>？

提问by Shawn

采纳答案by Valentin Flachsel

回答by bobince

回答by Gert Grenander

回答by Alan

回答by Zuul

回答by nickf

回答by Julien Kronegg

回答by balexandre

回答by Pablo

回答by artlung

相关推荐

CSS 如何使自定义滚动条在所有浏览器中显示？

CSS 从链接中删除顽固的下划线

CSS @font-face svg 在 Chrome 中无法正常工作？

CSS 颜色“透明”不起作用

相关推荐

最近更新

标签