Выделить строку в таблице через input и label
Доброго времени суток!
Если кто может - помогите пожалуйста. При клике на строку должен нажиматься соответствующий input, а строка - выделяться другим цветом. Нужно сделать именно через css, без js. Таков был план: (Пробовал увеличить z-index для label и понизить для содержимого - срабатывает, если внутри button, но не tr td)
<style>
label {
color:green;
background-color:white;
}
input:checked + label {
color:white;
background-color:green;
}
</style>
<table>
<input type='radio' id = '1'><label for='1'><tr><td>текст</td><td>таблицы</td></tr></label>
</table>
Близко к истине, но не могу выделить цветом все label, только первый. И не разобрался, как подставить аналог /\d+/ в id.
<style>
label {
color:green;
background-color:white;
}
input[id='2']:checked ~ label[for='2'] {
color:white;
background-color:green;
}
input[id='3']:checked label[for='3'] {
color:white;
background-color:green;
}
</style>
<table>
<tr><td><input type='radio' id = '2' name='name'><label for='2'>текст</label></td><td><label for='2'>таблицы</label></td></tr>
<tr><td><input type='radio' id = '3' name='name'><label for='3'>текст</label></td><td><label for='3'>таблицы</label></td></tr>
</table>
По отдельности эти селекторы работают, вместе - нет.
<style>
label[for='2'] {
color:white;
background-color:green;
}
input[id='3']:checked {
display: none;
}
</style>
<table>
<tr><td><input type='radio' id = '2' name='name'><label for='2'>текст</label></td><td><label for='2'>таблицы</label></td></tr>
<tr><td><input type='radio' id = '3' name='name'><label for='3'>текст</label></td><td><label for='3'>таблицы</label></td></tr>
</table>
|
Bab,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
input:checked + table {
color:white;
background-color:green;
}
label table {
display: inline-block;
}
</style>
</head>
<body>
<table >
<tbody>
<tr>
<td><label ><input type='radio' name="test"><table><tr><td>текст</td><td>таблицы</td></tr></table></label></td>
</tr>
<tr>
<td><label ><input type='radio' name="test"><table><tr><td>текст</td><td>таблицы</td></tr></table></label></td>
</tr>
<tr>
<td><label ><input type='radio' name="test"><table><tr><td>текст</td><td>таблицы</td></tr></table></label></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Но так теряется весь смысл от таблицы:(
Может все-таки можно связать эти два селектора? По отдельности они же срабатывают:
<style>
input[id='1']:checked {
display: none;
}
label[for='2'] {
color:white;
background-color:green;
}
input[id='3']:checked label[for='3'] {
color:white;
background-color:green;
}
</style>
<table>
<tr><td><input type='radio' id = '1' name='name'><label for='1'>текст</label></td><td><label for='1'>таблицы</label></td></tr>
<tr><td><input type='radio' id = '2' name='name'><label for='2'>текст</label></td><td><label for='2'>таблицы</label></td></tr>
<tr><td><input type='radio' id = '3' name='name'><label for='3'>текст</label></td><td><label for='3'>таблицы</label></td></tr>
</table>
Эта таблица из одной из шаблонных страниц сайта, данные из базы, количество столбцов при выводе разное, некоторые надо объединять, если характеристика одинаковая. Выравнивать через блоки очень муторно + с таблицей уже все готово. В общем-то главный вопрос в том, почему <label><button></label>, <label><div> - работает, а <label><td></label> - нет. |
| Часовой пояс GMT +3, время: 13:50. |