Question

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?

Answer 1

The best method is to use a server side language like to PHP to generate the required table based on the SQL query. This will result in shorter and more effective code.