CSS最初の3つのテーブル行以外のすべてを非表示にする方法

Question

CSS経由でテーブルの最初の3行だけを隠すことはできますか？テーブルはMySQLのクエリで満たされており、どれくらいの時間がかかるかはわかりません。ボタンをクリックすると、それが切り替わります。最初は3行しか表示せず、残りの部分を隠したいと思っています。私が試したのは

.modal-body table tbody tr:nth-last-child(-n+5) { 
    display: none; 
} 

ですが、この場合は最後の5行しか隠していません。この数字（この例では5）は私が言ったように静的ではありません。少し早いですがお礼を！

マイテーブル：

<table> 
        <thead> 
        <td class="p0 pl5 strong"><?=Yii::t('app','app.product')?></td> 
        <td class="p0 pl5 strong"><?=Yii::t('app','app.price')?></td> 
        <td class="p0 strong text-center"><?=Yii::t('app','app.Add')?></td> 
        </thead> 
        <?php if((isset($extras)) and !empty($extras)) { 
         foreach ($extras as $cnt => $extra) { 
          $cnt++;?> 
          <tr> 
           <td><?=$extra->title?></td> 
           <td><?= Yii::$app->moneyConvertor->getMoney($extra->getPrice()); ?></td> 
           <td class="p0"> 
            <section title=".slideThree"> 
             <div class="slideThree"> 
              <input type="checkbox" value="<?=$extra->id?>" id="slideThree<?=$cnt?>" onchange="checkBoxValue(this, <?= $product->id ?>)" name="check" checked/> 
              <label for="slideThree<?=$cnt?>"></label> 
             </div> 
            </section> 
           </td> 
          </tr> 
         <?php } 
        }?> 
       </table> 

Answer 1

あなたがここに::

tr:nth-child(-n+3) { 
    color: red; 
} 

Jsfiddleリンクで最初の3行を選択することができます。最初にすべてを非表示にするn番目の子を使用しhttp://jsfiddle.net/w8g7j4bu/

Answer 2

が、 3行

table tr:nth-child(n+4) { 
 
    display: none; 
 
}

<table> 
 
    <tr><td>Row 1</td></tr> 
 
    <tr><td>Row 2</td></tr> 
 
    <tr><td>Row 3</td></tr> 
 
    <tr><td>Row 4</td></tr> 
 
    <tr><td>Row 5</td></tr> 
 
    <tr><td>Row 6</td></tr> 
 
    <tr><td>Row 7</td></tr> 
 
    <tr><td>...</td></tr> 
 
</table>