CSS Height of Table Exceeds Height of Body - html

Question

I'm trying to use a table as a replacement for an image map so that it can be responsive, but for some reason, after setting the table's height to 100%, it still goes past the body, and I can't figure out why.
CSS and HTML:
body,
html {
padding:0;
margin:0;
width:100%;
height:100%;
}
body {
background-color:black;
}
html {
background-color:white;
}
table {
border-spacing:0;
border-collapse: collapse;
height:100%;
margin:0 auto;
}
td {
margin:0;
padding:0;
height:100%;
}
tr {
height:100%;
}
<table>
<tr data-name="row1">
<td data-name="pic1">
<a class="openBox" data-source="split/A1-4096-0171.mp4">
<img src="thumb/A1-4096-0171.png">
</a>
</td>
<td data-name="pic2">
<a class="openBox" data-source="split/B1-4096-0171.mp4">
<img src="thumb/B1-4096-0171.png">
</a>
</td>
</tr>
<tr data-name="row2">
<td data-name="pic3">
<a class="openBox" data-source="split/A2-4096-0171.mp4">
<img src="thumb/A2-4096-0171.png">
</a>
</td>
<td data-name="pic4">
<a class="openBox" data-source="split/B2-4096-0171.mp4">
<img src="thumb/B2-4096-0171.png">
</a>
</td>
</tr>
<tr data-name="row3">
<td data-name="pic5">
<a class="openBox" data-source="split/A3-4096-0171.mp4">
<img src="thumb/A3-4096-0171.png">
</a>
</td>
<td data-name="pic6">
<a class="openBox" data-source="split/B3-4096-0171.mp4">
<img src="thumb/B3-4096-0171.png">
</a>
</td>
</tr>
<tr data-name="row4">
<td data-name="pic7">
<a class="openBox" data-source="split/A4-4096-0171.mp4">
<img src="thumb/A4-4096-0171.png">
</a>
</td>
<td data-name="pic8">
<a class="openBox" data-source="split/B4-4096-0171.mp4">
<img src="thumb/B4-4096-0171.png">
</a>
</td>
</tr>
</table>
Screenshot of the issue:
The black is the body background is the body tag, while the white is the html tag, so the table is, for some reason, going outside the body going by the way it looks. It should be no taller than the window based on my CSS, correct?