Extra space appears in table cells when I reduce height - html

Question

I am having trouble reducing the height of the table cells in rows 1 and 2. I tried setting the table rows to 100 pixels within html, but when I do that table cells below the row grow larger as if compensating for the missing space. I do not see this happening in the fiddle below, but I am having this problem in Chrome. I would appreciate any help. The relevant code is below, and the full page is in the fiddle.
https://jsfiddle.net/9qLg7c31/2/
HTML:
Resume Page
<br>
<table class="no-spacing">
<tr style="height:100px">
<td>
Northwestern University
</td>
<td>
Class of 2016
</td>
<td>
Bachelors of Science in Journalism
</td>
<td style="text-indent: 10px">
Integrated Marketing Certificate
</td>
</tr>
<tr>
<td>
Field
</td>
<td>
2012
</td>
<td>
2013
</td>
<td>
2014
</td>
<td>
2015
</td>
<td>
2016
</td>
</tr>
<tr>
<td>Content Marketing</td>
<td style="background-color:white">
<div class="dropdown";>
<img src="http://st.hzcdn.com/fimgs/5f33bbc80182569c_3779-w173-h173-b1-p0--whatasteele.jpg">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: white">
</td>
<td>
</td>
<td style="background-color: white">
<div class="dropdown">
<img src="http://www.reelnreel.com/wp-content/uploads/2015/01/Wochit.png">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color:white">
</td>
</tr>
<tr>
<td>
Multimedia Journalism
</td>
<td>
</td>
<td>
</td>
<td style="background-color: blue">
<div class="dropdown">
<img src="http://www.complaintsboard.com/thumb.php?src=chicago-tribune.jpg&wmax=900&hmax=900&quality=90&nocrop=1&bname=120767">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: black">
<div class="dropdown">
<div class="dropdown-content">
<img src="http://onekreate.com/wp-content/uploads/2014/04/40_Inc_Magazine.jpg">
</div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>Volunteer Work</td>
<td style="background-color: purple">
<div class="dropdown">
<div class="dropdown-content">
<img src="https://pbs.twimg.com/profile_images/570772503543291904/uYixut-M.jpeg" style="width:100px; height:100px">
</div>
</td>
<td style="background-color: purple">
</td>
<td style="background-color: purple">
</td>
<td>
</td>
<td>
</tr>
</table>
CSS:
#resume {
width: 100%;
height: 150%;
background-color: rgb(0,300,200);
margin-bottom:0px;
z-index:0;
}
#resume table{
background-color: rgb(0,200,200);
margin-left: 2.5%;
width:95%;
height:100%;
padding-bottom:10px;
border-radius: 20px;
}
#resume table ul{
color: rgb(0,300,200);
font-size:20px;
}
.no-spacing {
border-spacing:0; /* Removes the cell spacing via CSS */
border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display: hidden;
}
.dropdown:hover .dropdown-content{
display:block;
position: relative;
width:300px;
}
#resume table th{
padding:15px 0 15px 0;
}
#resume table img{
width:150px;
height:100px;
}
#resume table tr:nth-child(3), #resume table tr:nth-child(4), #resume table tr:nth-child(5){
height:200px;
}