当我降低高度时，表单元格中会出现额外的空间

Question

我在减少第1行和第2行中表格单元格的高度时遇到了问题。我尝试在html中将表格行设置为100像素，但是当我这样做时，行下面的单元格会变得更大，就好像补偿了缺失一样空间。我没有在下面的小提琴中看到这种情况，但我在Chrome中遇到了这个问题。我将不胜感激任何帮助。相关代码如下，整页都在小提琴中。

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;
}