「閱讀更多」在CSS不工作在表

Question

我試圖把第三列'閱讀更多'箭頭，它應該擴大第一列的文本。 這是我的代碼，在表格外運行良好，但在表格中不行。 我的錯誤在哪裏？我不想使用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 />。稍微改變一下代碼。另外，在<span>裏面使用<p>似乎不是一個好主意。改變，要<div>：

.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

感謝@Praveen庫馬爾我得到這個最終代碼。 CSS沒有父選擇器，所以我不能只通過檢查輸入狀態將'read-more'trinagle變成180deg。

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