Conflicting column height overflow on a fixed table. Using bootstrap 3 with MVC 4
<p>I found a solution on how to fixed a table with scroll bar by creating another class <code>.tablecontainer</code>, but in this case I need to add a drop-down list on one column so my table adjusted its height according to the drop-down cell column, I need to adjust all rows, according to drop-down cell's height. </p>

<p>A screenshot of the state is:</p>

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

<p>This is my code:</p>

<pre><code>&lt;head&gt;
    &lt;style type="text/css"&gt;
    table {
        table-layout: fixed;
        word-wrap: break-word;
        vertical-align: central;
    }
    .tablecontainer {
        width: 1000px;
        overflow: hidden;
    }
    tr {
        display: block;
    }
    th, td {
        width: 500 px;
    }
    tbody {
        display: block;
        height: 400px;
        overflow: auto;
    }
    .table tbody &gt; tr &gt; td.vert-align {
        vertical-align: middle;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
</code></pre>

<p>and HTML:</p>

<pre><code>&lt;div class="container" style="padding: 70px"&gt;
    &lt;h3 style="font-family:'Century Gothic'"&gt;&lt;/h3&gt;
    &lt;table class="table table-bordered table-striped"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th style= "column-width:100px; text-align:center"&gt;Employee No.&lt;/th&gt;
                &lt;th style= "column-width:200px; text-align:center"&gt;Employee Name&lt;/th&gt;
                &lt;th style= "column-width:100px; text-align:center""&gt;Status&lt;/th&gt;
                &lt;th style= "column-width:100px; text-align:center""&gt;Training Title&lt;/th&gt;
                &lt;th style= "column-width:100px; text-align:center""&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;


            &lt;tr&gt;
                &lt;td style= "column-width:100px; celltext-align:center"&gt;12345&lt;/td&gt;
                &lt;td style= "column-width:200px; text-align:center"&gt;Lardino, Bryan S.&lt;/td&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;For Approval&lt;/td&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;Wave Training&lt;/td&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;&lt;div class="btn-group"&gt;
                    &lt;button type="button" class="btn btn-default"&gt;Action&lt;/button&gt;
                    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                    &lt;span class="caret"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;ul class="dropdown-menu" role="menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Approved&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Disapproved&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;12345&lt;/td&gt;
                &lt;td style= "column-width:200px; text-align:center"&gt;Lardino, Bryan S.&lt;/td&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;For Approval&lt;/td&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;Wave Training&lt;/td&gt;
                &lt;td style= "column-width:100px; text-align:center"&gt;&lt;div class="btn-group"&gt;
                    &lt;button type="button" class="btn btn-default"&gt;Action&lt;/button&gt;
                    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                    &lt;span class="caret"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;ul class="dropdown-menu" role="menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Approved&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Disapproved&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;&lt;/td&gt;
            &lt;/tr&gt;

        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;div class="row" style="height: 50px"&gt;
        &lt;a class="btn btn-primary btn-default pull-right" href="#")&gt;Submit&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>