テーブル内でCSSが機能しない場合は

Question

3列目に「もっと読む」矢印を表示しようとしていますが、最初の列にテキストを展開する必要があります。 ここに私のコードは、テーブルの外では良いが、テーブルではありません。 私のミスはどこですか？私はjQやJSを使いたくありません。

.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>

Answer 1

問題を得ました。 <input />は、<tr>のすぐ下に置くことはできません。コードを少し変更してください。また、<p>を<span>の中に使用するのは良い考えではありません。 <div>にそれを変更します。@Praveenクマーへ

.read-more-state { 
 
    display: none; 
 
} 
 

 
.read-more-target { 
 
    display: none; 
 
} 
 

 
.read-more-state:checked + table .read-more-wrap .read-more-target { 
 
    display: block; 
 
} 
 

 
.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 + table .read-more-trigger:before { 
 
    transform: rotate(180deg); 
 
} 
 

 
.read-more-trigger { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    border:1px solid black; 
 
}

<input type="checkbox" class="read-more-state" id="post-2" /> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="read-more-wrap"> 
 
     <p>Lorem ipsum dolor sit amet.</p> 
 
     <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> 
 
     </div> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-2" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

おかげで、私は、この最終的なコードを得ました。 CSSは親セレクタを持っていないので、チェックイン入力状態でのみ「read-more」トリガグルを180degだけ回転させることはできません。矢印が3列目に示されていないだろう、なぜ

.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-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; 
 
    width: 10rem; 
 
    vertical-align:top; 
 
}

<article> 
 
    <h4>CSS 'read-more' table version</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> 
 
    <td> 
 
     <input type="checkbox" class="read-more-state" id="post-2" /> 
 
     <span class="read-more-wrap"> 
 
     Lorem ipsum dolor sit amet. 
 
     <span 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.</span> 
 
     </span> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-2" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="read-more-state" id="post-3" /> 
 
     <span class="read-more-wrap"> 
 
     Lorem ipsum dolor sit amet. 
 
     <span class="read-more-target" id="post-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span> 
 
     </span> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-3" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="read-more-state" id="post-4" /> 
 
     <div class="read-more-wrap"> 
 
     Lorem ipsum dolor sit amet. 
 
     <span class="read-more-target" id="post-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span> 
 
     </div> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-4" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
</table>