使用 CSS 隐藏表格行答案

【问题标题】：Hide Table Row Using CSS使用 CSS 隐藏表格行
【发布时间】：2013-03-17 07:38:58
【问题描述】：

是否可以使用 CSS 隐藏表格行，我有一个项目需要这个概念。这是我的代码：

style.css：

#hide-row { display:none; }

file.php

<table>
  <tr>
      <th>Name</th>
      <th>Address</th>
  </tr>
  <div id="hide-row">
     <?php foreach( $cops as $row ) { ?>
        <tr>
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->address; ?></td>
        </tr>
     <?php } ?>
  </div>
</table>

但是，它不起作用，记录仍然出现。任何人帮助如何解决这个案子？任何帮助将不胜感激。谢谢你的高级！

【问题讨论】：

你有多个hide-row id吗？

标签： php html css

【解决方案1】：

使用类而不是 id：

.hide-row { display:none; }

在你的 html/php 文件中：

<table>
  <tr>
      <th>Name</th>
      <th>Address</th>
  </tr>
     <?php foreach( $cops as $row ) { ?>
        <tr class="hide-row">
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->address; ?></td>
        </tr>
     <?php } ?>
</table>

如果您必须对行进行分组，您可以使用tbody 标记而不是div 标记。

Can we have multiple <tbody> in same <table>?

 .hide-row tr { display:none; }

在你的 html/php 文件中：

<table>
  <tr>
      <th>Name</th>
      <th>Address</th>
  </tr>
    <tbody class="hide-row">
     <?php foreach( $cops as $row ) { ?>
        <tr>
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->address; ?></td>
        </tr>
     <?php } ?>
     </tbody>
</table>

【讨论】：

谢谢 Jantimon，它运行良好。我选择第二个选项。实际上，当用户单击与迭代相关的内容时，我想通过 Jquery 以平滑切换的方式显示它。 -)
这是公认的答案，但更好的解决方案在这里stackoverflow.com/questions/1144123/…，原因是页面位置（滚动）不同。当桌子很大并且隐藏/显示按钮在桌子下时，display:none 不正确。使用visibility:collapse，光标应该是隐藏行后的位置。

【解决方案2】：

您不能将 div 作为

元素的直接子元素。要隐藏单行，请参阅 jantimon 的答案。如果要对多行进行分组，请使用 :

css

.hide-row { display:none; }

php

<table>
    <tr>
        <th>Name</th>
        <th>Address</th>
    </tr>
    <tbody class="hide-row">
        <?php foreach( $cops as $row ) { ?>
            <tr>
                <td><?php echo $row->name; ?></td>
                <td><?php echo $row->address; ?></td>
            </tr>
        <?php } ?>
    </tbody>
</table>

【讨论】：

+1 表示 table（或 tbody 或 thead 或 tfoot）没有 div 子级。后裔，是的，如果有tr 介于两者之间（我编辑了您的答案以反映您可以在表格中包含div，但在tr>td 或tr>th 中）

【解决方案3】：

您不能将div 直接嵌套在table 标记中。你必须给你的行一个类，然后隐藏它。比如：

.hidden {
    display: none;
}

<?php foreach( $cops as $row ) { ?>
    <tr class="hidden">
        <td><?php echo $row->name; ?></td>
        <td><?php echo $row->address; ?></td>
    </tr>
 <?php } ?>

【讨论】：

【解决方案4】：

您不能在<tr> 之外拥有<div>.. 将课程交给<tr> 并隐藏它.. 无需在其周围创建<div>

html

<tr class="hide-row">
        <td><?php echo $row->name; ?></td>
        <td><?php echo $row->address; ?></td>
    </tr>

style.css

.hide-row { display:none; }

【讨论】：

【解决方案5】：

我会给你想要隐藏的每一行一个 hide-row 类：

<tr class="hide-row">

您的 CSS 将如下所示：

tr.hide-row { display: none; }

这意味着您不需要嵌套的 div。

【讨论】：