CSS: Hover adds unwanted extra white space - html

Question

I am simply trying to create a hover, so it hover over a entire section as seen below:
However, every time i hover over my products.
This happens instead
It adds extra white space to the section below and doesn't cover the section properly.
I have tried..
Changing the line height
Adding a new section/div
padding 0, margin 0
div#cat{
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}
<div id='cat'>
<table>
<tr>
<td class='full'>
<a name='foodcat$iii' id='prods_nme'>$prod_name</a>
<td>
</td>
<p id='prods_desc'>$prod_desc</p>
</td>
<td class='price'>
<p id='prods_price'>£$prod_price</p>
</td>
<td class='add'>
<a href='Shopping_cart.php?add_item=$prod_id'>+</a>
</td>
</tr>
</table>
</div>
My code is actually a string, which loop information out of a database.
echo("<div id='cat$i' class='cat'>");
echo("<table>");
echo("<tr>");
echo("<td class='full'>");
echo("<a name='foodcat$iii' id='prods_nme'>$prod_name</a>");
echo("<td>");
echo("</td>");
echo("<p id='prods_desc'>$prod_desc</p>");
echo("</td>");
echo("<td class='price'>");
echo("<p id='prods_price'>£$prod_price</p>");
echo("</td>");
echo("<td class='add'>");
echo("<a href='Shopping_cart.php?add_item=$prod_id'>+</a>");
echo("</td>");
echo("</tr>");
echo("</table>");
echo("<br>");
echo("<br>");
echo("<hr id='hr'>");
echo("</div>");
echo("</div>");
echo("</div>");
echo("<br>");
echo("<br>");
$i++;

Answer 1

Your CSS is adding extra height when it changes to hover state. Make sure when you're adding hover styles that you only change the properties you want to - in this case, you don't want to change the height.
You want something like this:
div#cat{
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}

Answer 2

ArtOfCode has the correct solution for your problem.
However, it is not a good idea to use tables for formatting. You can see the table padding (which I have done all the right things to eliminate) when the cells are given borders. Tables bring with them a number of formatting problems.
I suggest that you use DIVs instead, and learn the three or four things needed to use float:left and/or flexbox.
table{border-collapse:collapse;}
td{border:1px solid #ccc;padding:0;}
div#cat {
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover {
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}
<div id='cat'>
<table>
<tr>
<td class='full'>
<a name='foodcat$iii' id='prods_nme'>$prod_name</a>
<p id='prods_desc'>$prod_desc</p>
</td>
<td class='price'>
<p id='prods_price'>£$prod_price</p>
</td>
<td class='add'>
<a href='Shopping_cart.php?add_item=$prod_id'>+</a>
</td>
</tr>
</table>
</div>