Dropdown inside table cell toggles table row height on every click
<p>I have a drop down inside a table cell. On a click, the dropdown expands to show the menu items. But, the table row height also changes whenever the menu expands/collapses.</p>

<p>How can i keep the table row height constant and the dropdown gets displayed over the table. I tried setting higher z-index for dropdown container but it didn't work. As,</p>

<pre><code>.menu-body{
    background-color: #ea7600;
    z-index:2;
}
</code></pre>

<p>Plunker code is <a href="http://plnkr.co/edit/whqttI7DAThlmZEtOLKW?p=preview" rel="nofollow noreferrer">here</a>.</p>

<p><a href="https://i.stack.imgur.com/4QU2P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4QU2P.png" alt="enter image description here"></a></p>

<p>Table height must not fall below the second dark horizontal line.</p>