Hiding tables that have no data to display.
        Posted  
        
            by 
                Kinyanjui Kamau
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Kinyanjui Kamau
        
        
        
        Published on 2011-01-17T09:02:06Z
        Indexed on 
            2011/01/17
            22:53 UTC
        
        
        Read the original article
        Hit count: 230
        
Hi Guys, I have this css styling and was wondering what I need to change in order to collapse/hide html tables that are empty.
The style:
<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>
My 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>
I would want it such that if there are no results for my events table, the table does not show(there is no blank space between search results where event results should be because border=0). Can you hide entire tables?
© Stack Overflow or respective owner