У меня такой вопрос, как можно сделать невидимый чекбокс на всю ширину строки в таблице?
.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>