隐藏表格行使用CSS

是否可以隐藏表格行使用CSS，我有一个需要这个概念的项目。这里是我的代码：隐藏表格行使用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>

但是，它没有工作，记录仍然会出现。任何人都可以帮助解决这个问题？任何帮助将不胜感激。感谢您进阶！

来源

2013-03-27 Philips Tel

你有多个'捉迷藏row' IDS？ – Vimalnath 2013-03-27 09:15:12

不，我只有一个。 – 2013-03-27 09:19:40

使用，而不是一个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>

来源

2013-03-27 09:15:45 jantimon

谢谢Jantimon，它完美的工作。我选择第二个选项。实际上，当用户点击与迭代有关的内容时，我希望通过Jquery的平滑切换来显示它。 - ） – 2013-03-27 09:57:41

不能嵌套一个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 } ?>

来源

2013-03-27 09:16:50 mattytommo

你不能有<div>外<tr> ..给类<tr>和隐藏that..no需要创建一个围绕它<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; }

来源

2013-03-27 09:16:57 bipen

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

<tr class="hide-row">

你的CSS看起来像：

tr.hide-row { display: none; }

这就意味着你不需要div嵌套。

来源

2013-03-27 09:17:21 James

您不能将div作为<表>元素的直接子元素。要隐藏单行请参阅jantimon的答案。如果您希望将多个行使用< TBODY>：

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>

来源

2013-03-27 09:20:35 martijnve

对于“表格”（或“tbody”或“thead”或“tfoot”）的无子对象+1。后裔，是的，如果中间有'tr'（我编辑了你的答案，以反映你可以在表格中使用div，但在'tr> td'或'tr> th'中） – FelipeAls 2013-03-27 09:22:12

隐藏表格行使用CSS

回答

相关问题