Fit table size to internal image, css - html

Question

I'm trying to make a 2x5 table with a large image taking up the left most five cells and 5 links taking up the rightmost ones. I am having trouble fitting the table to the image.
I'd like the table to be a single rectangle in the end but currently the table is bigger than the image inside of it. Also, is there any way to do this just using CSS (no JS)?
Thank you in advance.
Here is jsfiddle: https://jsfiddle.net/3ktLpcmx/2/
and code:
HTML:
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td rowspan="5"><img style="display: block;" src="http://wallpapercave.com/wp/ckdySrm.png" width="500" /></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
</tr>
<tr>
<td class="linktd">mmmmmmm hm mmmmm</td>
</tr>
<tr>
<td class="linktd">Hmmm, mmmhmmmm</td>
</tr>
</table>
CSS:
body {
text-align: center;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
EDIT:
Things I have tried include removing the padding on the links, setting table height to auto (then links don't fill their cells), setting table to 375px (size of image), setting table to 376px, and setting the link-tds to 20% of table.

Answer 1

I do not think a table is needed here. nav could do for a menu .
display:flex will help size, align, grow and center things.
nav,
nav span,
nav span a {
display: flex;
}
nav span {
flex-flow: column;
}
a {
flex: 1;
width: 165px;
justify-content: center;
align-items: center;
background-color: #58809d;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
background-color: #282969;
}
nav img {
display: block;
}
<nav>
<img src="http://wallpapercave.com/wp/ckdySrm.png" width="500" />
<span>
Mmmmmhmmm
hmmmhhhhhmmm
MMMM MMMM!
mmmmmmm hm mmmmm
Hmmm, mmmhmmmm
</span>
</nav>

Answer 2

J.Joe, Your answer works well and is clever. Thank you.
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td class = "test" rowspan="5"></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
and
body {
text-align: center;
}
.test{
background-color: #cccccc;
background-image:url('http://wallpapercave.com/wp/ckdySrm.png');
background-size:cover;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}