position:fixed made table cells stretch across entire screen - html

Question

I have a table on my site. When I add position:fixed to the table, the cells of the table suddenly stretch across the entire height of the page, even though they have a set height.
as you can see in the code below, each tr has a set height value, but it is ignored when I add position:fixed to the table, and instead, the cells get the height of the entire page, and prevent me from accessing the content of the website.
any help on how to fix this, while still keeping the position:fixed attribute, would be appreciated.
.center {
margin:0 auto;
}
a{
text-decoration:none;
color:red;
}
table{
text-align:center;
width:30%;
left:25%;
/*font-size:larger;*/
}
body{
background-color:midnightblue;
color:snow;
white-space:nowrap;
}
.Error{
color:red;
}
.divSargel{
width:initial;
background-color:snow;
border: solid;
border-color: #000080;
float: left;
margin-left: 0.3%;
color: red;
font-size:x-large;
font-family:monospace;
border-radius: 20px;
text-align: center;
width:100%;
}
.divSargel:hover {
background-color: blue;
transition: linear 0.5s;
}
<table id="navbar" border="1" style="right:0px;left:0px;border-style: solid;border-color:black;margin:0 auto;max-width:999999px; width:100%; height: 100%; background-image: none;">
<tr>
<td colspan="5" style="background-image: url('/Pics/videogames2.jpg'); height:100px; background-repeat: no-repeat; background-size:100% 100%">
</td>
</tr>
<tr style="height:50px">
<td style="border-color: #000000; background-color: #000000; color: #FFFFFF;">
<asp:TextBox ID="txtClock" style="text-align:center" runat="server" width="90%" ReadOnly="true"></asp:TextBox>
</td>
<td style="border-color: #000000; color: #FFFFFF; background-color: #000000">
<asp:TextBox ID="txtPeopleCount" style="text-align:center" runat="server" Width="90%" ReadOnly="true"></asp:TextBox>
</td>
<td style="width:50%;border:medium solid #000080; background-color: #000000;">
<table border="1" style="border-color:snow;width:100%">
<%if (Session["UserName"] == null)
{ %>
<tr>
<td class="textCenter">
<a href="Main.aspx" class="divSargel">
Main
</a>
</td>
<td class="textCenter">
<a href="ShopProducts.aspx" class="divSargel">
Shop
</a>
</td>
</tr>
<%} %>
<%if (Session["UserName"] != null && Session["UserAdmin"] == null)
{ %>
<tr>
<td class="textCenter">
<a href="Main.aspx" class="divSargel">
Main
</a>
</td>
<td class="textCenter" >
<a href="ShowUsers.aspx" class="divSargel">
Show Users
</a>
</td>
<td class="textCenter">
<a href="ShopProducts.aspx" class="divSargel">
Shop
</a>
</td>
<td class="textCenter">
<a href="ShoppingCart.aspx" class="divSargel">
View Cart
</a>
</td>
</tr>
<tr>
<td class="textCenter">
<a href="ShowBank.aspx" class="divSargel">
View Bank
</a>
</td>
<td class="textCenter">
<a href="ShowCreditCards.aspx" class="divSargel">
View credit cards
</a>
</td>
<td class="textCenter">
<a href="ShowOrders.aspx" class="divSargel">
View Orders
</a>
</td>
<td class="textCenter">
<a href="ContactUs.aspx" class="divSargel">
Contact us
</a>
</td>
</tr>
<%} %>
<%if (Session["UserAdmin"] != null)
{ %>
<tr>
<td class="textCenter">
<a href="Main.aspx" class="divSargel">
Main
</a>
</td>
<td class="textCenter" >
<a href="ShowUsers.aspx" class="divSargel">
Show Users
</a>
</td>
<td class="textCenter">
<a href="ShopProducts.aspx" class="divSargel">
Shop
</a>
</td>
<td class="textCenter">
<a href="ShoppingCart.aspx" class="divSargel">
View Cart
</a>
</td>
</tr>
<tr>
<td class="textCenter">
<a href="ShowBank.aspx" class="divSargel">
View Bank
</a>
</td>
<td class="textCenter">
<a href="ShowCreditCards.aspx" class="divSargel">
View credit cards
</a>
</td>
<td class="textCenter">
<a href="ShowOrders.aspx" class="divSargel">
View Orders
</a>
</td>
<td class="textCenter">
<a href="AdminPage.aspx" class="divSargel">
Admin actions
</a>
</td>
</tr>
<%} %></table>
</td>
<%if (Session["UserName"] == null)
{ %>

Answer 1

Try setting the height of the table as desired and mark it as important like
table{
height : 150px !important;
}

Answer 2

Managed to find the problem. for some reason I had a height:100% on the table itself, and so even though the rows had specified heights, upon adding position:fixed the table stretched across the screen.