0

У меня такой вопрос, как можно сделать невидимый чекбокс на всю ширину строки в таблице?

.ips_table {
	display: table;
	width: 100%;
	text-align: center;
}

.ips_table_content {
	display: table-row-group;
}

.ips_table_head {
	font-size: 14px;
	color: #222;
	text-transform: uppercase;
	display: table-row;
}

.ips_table_desc {
	border-bottom: 1px solid #E8E8E8;
	display: table-cell;
	padding: 15px;
}

.ips_table_user {
	display: table-row;
	color: #222; 
    line-height: 18px;
}

.ips_user_desc {
	border-bottom: 1px solid #000;
	display: table-cell;
	padding: 10px;
}

input[type=checkbox]{
   position: absolute;

}
input[type=checkbox]:checked ~ .ips_table_user{
	background-color: #ff0;
}
			<div class="ips_table_content">
				<div class="ips_table_head">
        <div class="ips_table_desc">Delete</div>
				<div class="ips_table_desc">Head-Text</div>
				<div class="ips_table_desc">Head-Text</div>
				<div class="ips_table_desc">Head-Text</div>
				<div class="ips_table_desc">Head-Text</div>
				<div class="ips_table_desc">Head-Text</div>
				</div>
				
				
				<div class="ips_table_user">
				<div class="ips_user_desc"><label for="toggle"></label><input type="checkbox" id="toggle"></div>
				<div class="ips_user_desc">Name</div>
				<div class="ips_user_desc">01 Feb 2017 00:00</div>
				<div class="ips_user_desc">777</div>
				<div class="ips_user_desc">123</div>
				<div class="ips_user_desc">test</div>
				</div>
				
			</div>

1 ответ 1

1

Использовать <label> (правда, так делать нельзя, спецификация html не позволяет этого):

.ips_table {
  display: table;
  width: 100%;
  text-align: center;
}

.ips_table_content {
  display: table-row-group;
}

.ips_table_head {
  font-size: 14px;
  color: #222;
  text-transform: uppercase;
  display: table-row;
}

.ips_table_desc {
  border-bottom: 1px solid #E8E8E8;
  display: table-cell;
  padding: 15px;
}

.ips_table_user {
  display: table-row;
  color: #222;
  line-height: 18px;
}

.ips_user_desc {
  border-bottom: 1px solid #000;
  display: table-cell;
  padding: 10px;
}

input[type=checkbox] {
  position: absolute;
}

input[type=checkbox]:checked~.ips_table_user {
  background-color: #ff0;
}
<div class="ips_table_content">
  <div class="ips_table_head">
    <div class="ips_table_desc">Delete</div>
    <div class="ips_table_desc">Head-Text</div>
    <div class="ips_table_desc">Head-Text</div>
    <div class="ips_table_desc">Head-Text</div>
    <div class="ips_table_desc">Head-Text</div>
    <div class="ips_table_desc">Head-Text</div>
  </div>


  <label class="ips_table_user">
				<div class="ips_user_desc"><label for="toggle"><input type="checkbox" id="toggle"></div>
        <div class="ips_user_desc">Name</div>
        <div class="ips_user_desc">01 Feb 2017 00:00</div>
        <div class="ips_user_desc">777</div>
        <div class="ips_user_desc">123</div>
        <div class="ips_user_desc">test</div>
  </label>
</div>

Как более правильный вариант используйте javascript, чтобы вызывать клик при нажатии на строку псевдо-таблицы

1
  • Понятно, спасибо за ответ и совет) 17 апр 2017 в 12:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.