CSS如何隐藏除前3个表格行之外的所有行[重复]答案

【问题标题】：CSS how to hide all but first 3 table rows [duplicate]CSS如何隐藏除前3个表格行之外的所有行[重复]
【发布时间】：2017-12-01 20:44:35
【问题描述】：

我可以通过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>

【问题讨论】：

标签： css

【解决方案1】：

使用第 n 个孩子隐藏除前 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>

【讨论】：

【解决方案2】：

您可以通过以下方式选择前三行：

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

Jsfiddle 链接在这里：http://jsfiddle.net/w8g7j4bu/

【讨论】：