I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefer not to use jQuery or JavaScript.
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
display: none;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
display: block;
}
.read-more-state ~ .read-more-trigger:before {
width: 0;
height: 0;
border-top: .6rem solid red;
border-right: .6rem solid transparent;
border-left: .6rem solid transparent;
display: inline-block;
content: '';
}
.read-more-state:checked ~ .read-more-trigger:before {
transform: rotate(180deg);
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
}
td {
border:1px solid black;
}<article>
<h4>Lorem ipsum</h4>
<input type="checkbox" class="read-more-state" id="post-1" />
<div class="read-more-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque voluptate maiores fugiat nam ab dolorum magni eos libero laudantium, eum cupiditate atque repellendus debitis quisquam blanditiis, quis modi aliquid?</p>
<span class="read-more-target" id="post-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis architecto quia modi. Optio ducimus amet aliquam, recusandae ad, cupiditate harum minima sint repellat tenetur dolores, soluta quidem est veniam reprehenderit?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iusto ratione error blanditiis non, commodi sequi. Quas, id. Atque harum hic quia totam qui laborum. Molestias laborum, tempora ratione aperiam.</p>
</span>
</div>
<label for="post-1" class="read-more-trigger"></label>
</article>
<hr>
<table>
<tr>
<input type="checkbox" class="read-more-state" id="post-2" />
<td class="read-more-wrap">Lorem ipsum dolor sit amet.
<p class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</p>
</td>
<td>100 pts</td>
<td><label for="post-2" class="read-more-trigger">???</label></td>
</tr>
</table>