Как <маркировка> может полностью заполнить ее родителя <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" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Причина состоит в том, что я хочу, чтобы щелчок где угодно в ячейке таблицы проверил/снял флажок флажок.
редактирования: Между прочим, никакие решения JavaScript, по причинам доступности. Я пытался использовать дисплей: блок; но это только работает на ширину, не на высоту
8 ответов
Я тестировал это только в 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-хака для атрибута min-height, как объяснено в комментариях.
Надеюсь, это поможет!
Мне нужен щелчок в любом месте ячейки таблицы
<tr onclick="alert('process click here');"> ... </tr>
Попробуйте этот CSS для вашего лейбла
label {
border:1px solid #FF0000;
display:block;
height:35px;
}
Вот живая демонстрация http://jsbin.com/ehoke3/2/
По умолчанию ярлыки являются встроенными элементами, поэтому установка ширины и высоты ничего не дает.
label { display: block; }
Сделает.
(Однако практика размещения метки вокруг флажка, с которым она должна быть связана, вместо явного использования for, не работает в IE)
То, как вы применяете метки, не делает элементы формы полностью доступными. Метка должна применяться к тексту, связанному с элементом формы, а не только к элементу формы. Но нет ничего плохого в том, чтобы добавить еще одну метку поверх элемента формы, чтобы сделать всю область внутри TD интерактивной. На самом деле это желательно, чтобы дать людям с двигательными нарушениями большую область для щелчка. предназначен для людей, которые используют средства чтения с экрана для просмотра веб-формы.
Кроме того, нет ничего недоступного в использовании 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'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" /> </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 .
Как видно из кода, форма стала полностью доступной за счет добавления сводной таблицы , thead , th , области видимости Ярлык , для и т. Д. Конечно, это не было частью того, что вы просили, но я добавил это в качестве дополнительного бонуса.
В строке со "Значением 1" у вас не просто "немного больше информации", вы также включаете паузу. Мне кажется, что все, что вам действительно нужно сделать, это включить должен иметь CSS-атрибут display, установленный на 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" /> <br> </label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>
Одно замечание: вы не добьетесь идеальной производительности во всех основных браузерах последних 10 лет - кашель IE6 - не прибегая к таким вещам, как JavaScript. Я считаю, что мое решение - лучшее решение без использования JavaScript.
Этот код делает то, что вы хотите, и он протестирован в 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" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Если ваша проблема не была решена, надеюсь, это решит ее! ;)
Этот ответ немного "оттуда" - чтобы он был действительным 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; }