Как <label> может полностью заполнить родительский <td>?

Вот соответствующий код (не работает):

<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>

Причина в том, что я хочу щелкнуть в любом месте ячейки таблицы, чтобы установить/снять флажок.

редактирует: Кстати, никаких javascript-решений, пожалуйста, по причинам доступности. Я пробовал использовать display: block; но это работает только для ширины, а не для высоты

Ответы

Ответ 1

Я тестировал это только в 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>

Основной трюк здесь - определить высоту строк, чтобы мы могли использовать высоту 100% на своих дочерних элементах (ячейках) и по очереди - 100% -ную высоту на дочерних ячейках (метки). Таким образом, независимо от количества содержимого в ячейке, он будет принудительно расширять свою родительскую строку, и последуют ее дочерние ячейки. Поскольку метка имеет высоту 100% ее родителя, которая имеет определенную высоту, она также будет расширяться по вертикали.

Второй и последний трюк (но так же важно) - это использование CSS-хака для атрибута min-height, как описано в комментариях.

Надеюсь, это поможет!

Ответ 2

Ярлыки являются встроенными элементами по умолчанию, поэтому установка ширины и высоты ничего не делает.

label { display: block; }

Сделал бы это.

(Тем не менее, практика размещения метки вокруг флажка, с которым она должна быть связана, а не явно с использованием for, не работает в IE.)

Ответ 3

Способ применения меток не делает элементы формы полностью доступными. Метка должна быть применена к тексту, связанному с элементом формы, а не только к элементу формы. Но нет ничего плохого в добавлении другой метки над элементом формы, чтобы сделать всю область внутри TD доступной. Это действительно желательно для того, чтобы дать людям с ограниченными двигательными способностями большую площадь щелчка. <label for="whatever">Your label</label> предназначен для тех, кто использует экранные программы для просмотра веб-формы.

Кроме того, нет ничего недоступного в использовании 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 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>

Вам нужно загрузить jQuery и поместить файл jquery.min.js в папку с именем js.

Как вы можете видеть в коде, форма была полностью доступна, добавив table summary, thead, th, scope, label for и т.д. Конечно, это не было частью что вы спросили, но я добавил это в качестве дополнительного бонуса.

Ответ 4

Этот код делает то, что вы хотите, и он тестировался на 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>

Если ваша проблема не была решена, надейтесь, что это решит!;)

Ответ 5

Этот ответ немного "там" - для того, чтобы он был действительным 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; }

Ответ 6

Я хочу щелкнуть в любом месте ячейки таблицы

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

Ответ 7

Попробуйте этот CSS для вашей метки

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

Вот живой демо http://jsbin.com/ehoke3/2/

Ответ 8

В вашей строке с "Value 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" /> &nbsp;<br>&nbsp;</label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>

Одно замечание: вы не получите идеальную производительность во всех основных браузерах за последние 10 лет - кашель IE6 - не прибегая к таким вещам, как JavaScript. Я считаю, что мое решение - лучшее решение, не прибегая к JavaScript.

Ответ 9

Решение ниже:

  • имеет <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>

Ответ 10

Я не нашел, что другие ответы работали в текущих браузерах (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, чтобы центрировать флажок; если вы ориентируетесь на старые браузеры, вы можете попробовать изменить стиль центрирования.