2

Can I somehow hide all but first 3 rows in table via CSS only ? The table is filled by MySQL query and i don't know how long it can be. On button click i toggle it. In first i want to show only 3 rows and hide the rest. What i tryied is 

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

but in this case I am hiding only the last 5 rows. This number ( 5 in the example ) won't be static as i said. Thank in advance!

My table : 

   <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>
Toma Tomov
  • 1,476
  • 19
  • 55

2 Answers2

4

Use the n-th child to hide all but first 3 rows

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>
Joschi
  • 2,874
  • 1
  • 18
  • 23
0

You can select first three rows by::

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

Jsfiddle link here : http://jsfiddle.net/w8g7j4bu/

Sonia
  • 1,909
  • 1
  • 11
  • 13