隐藏没有数据可显示的表答案

【问题标题】：Hiding tables that have no data to display隐藏没有数据可显示的表
【发布时间】：2011-01-18 06:48:46
【问题描述】：

我有这个 css 样式，想知道我需要更改什么才能折叠/隐藏空的 html 表。

风格：

<style>
#search_settings
{
    position:relative;  
    height:25px;
    width:500px;    
}

#users_table_results
{
    border-collapse:separate;
    empty-cells:hide;
}

#events_table_results
{
    border-collapse:separate;
    empty-cells:hide;
}

#establishments_table_results
{
    border-collapse:separate;
    empty-cells:hide;
}
</style>

我的 HTML：

<div id="search_settings">
 <table width="500" border="0">
  <tr>
    <td height="20" class="heading_text_18">Search results</td>
  </tr>
 </table>
 <table id="users_table_results" max-width="500" name="users" border="0">
  <tr>
    <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td>
  </tr>
 </table> 
 <table id="events_table_results" width="500" name="events" border="0">
  <tr>
    <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td>
  </tr>
 </table>
 <table id="establishments_table_results" width="500" name="establishments" border="0">
  <tr>
    <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td>
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td>
  </tr>
 </table>                      
</div>

我希望这样，如果我的事件表没有结果，则该表不会显示（搜索结果之间没有空格，因为border=0，事件结果应该是）。你能隐藏整个表格吗？

【问题讨论】：

标签： php html css

【解决方案1】：

为什么不将整个表格包装在 PHP if 语句中，然后用它来检查数据并显示表格？

【讨论】：

【解决方案2】：

如果您想让您的客户端 HTML 不受服务器端标记的影响，并帮助将内容和行为 100% 分开，您可以使用 JQuery 隐藏任何未找到行元素的表：

$(document).ready( function() {
    $('table').each( function() {
        if( $(this).find('tr').length == 0 ) {
            $(this).hide();
        }
    });
});

【讨论】：

@Kinyanjui - 这很简单。上面的代码将在您的 HTML 上运行，无需更改服务器端或客户端的任何内容，只需将其粘贴到页面部分的

【解决方案3】：

最好的方法是使用像 PHP 这样的服务器端语言来根据 SQL 查询生成所需的表。这将导致代码更短、更有效。

【讨论】：

非常感谢。我制作了 PHP 代码来使用 echo 生成表格，它解决了我的问题

【解决方案4】：

如果您想仅使用 css 和现有代码来实现这一点，您可以创建一个名为 hidden_table 的新 css 类并将显示设置为无：

.hidden_table {
    display: none;
}

然后在你的输出中，如果有行，你可以决定是否将表格的css类写成你的标准类，或者你可以给表格一个“hidden_table”类，它会隐藏整个表格。

【讨论】：