title: overflow-x and overflow-y is not working correctly in chrome
body: <p>I have made a common table to hide extra text in cells using below css code</p>
  
  <pre><code>.table td{
     display: table-cell;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 250px;
     width: inherit;
     overflow-y: hidden;
     overflow-x: visible;
  }
  </code></pre>
  
  <p>Html code</p>
  
  <pre><code>&lt;table class="table table-striped table-bordered table-hover"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt; # &lt;/th&gt;
                                              &lt;th&gt;Name&lt;/th&gt;
                                              &lt;th class="hidden-xs"&gt;Code&lt;/th&gt;
                                              &lt;th&gt;Category&lt;/th&gt;
                                              &lt;th class="hidden-xs"&gt;Location&lt;/th&gt;
                                              &lt;th&gt;More&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                          &lt;tr role="row" class="odd"&gt;
                                              &lt;td&gt;21&lt;/td&gt;
                                              &lt;td class="sorting_1"&gt;XXXXXXXX&lt;/td&gt;
                                              &lt;td&gt;00000000&lt;/td&gt;
                                              &lt;td&gt;xxxxxxxxxx&lt;/td&gt;
                                              &lt;td&gt;No: xx/x&lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;div align="center"&gt;
                                                      &lt;div class="btn-group"&gt;
                                                          &lt;a class="btn btn-xs btn-blue dropdown-toggle btn-sm" data-toggle="dropdown" href="#"&gt;
                                                              &lt;i class="fa fa-cog"&gt;&lt;/i&gt; 
                                                              &lt;span class="caret"&gt;&lt;/span&gt;
                                                          &lt;/a&gt;
                                                          &lt;ul role="menu" class="dropdown-menu pull-right"&gt;
                                                              &lt;li role="presentation"&gt;
                                                                  &lt;a role="menuitem" tabindex="-1" href="../asset/edit?id=57"&gt;
                                                                      &lt;i class="fa fa-edit"&gt;&lt;/i&gt; Edit
                                                                  &lt;/a&gt;
                                                              &lt;/li&gt;
                                                              &lt;li role="presentation"&gt;
                                                                  &lt;a data-toggle="modal" role="menuitem" tabindex="-1" href="#model57"&gt;
                                                                      &lt;i class="fa fa-times"&gt;&lt;/i&gt; Remove
                                                                  &lt;/a&gt;
                                                              &lt;/li&gt;
                                                          &lt;/ul&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
  </code></pre>
  
  <p>There is a button in a cell on each table and it shows a dropdown when click on the button like bellow.
  <a href="https://i.stack.imgur.com/A9dqy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A9dqy.png" alt="enter image description here"></a></p>
  
  <p>For the above code dropdown works correctly in firefox, but in chrome it hide the dropdown menu like below.
  <a href="https://i.stack.imgur.com/3ralZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3ralZ.png" alt="enter image description here"></a></p>
  
  <p>I need to make a common css code for work in every table. How can i fix this issue in chrome?</p>
  
  <p>Here is the fiddle example. Check it with firefox and chrome
  <a href="https://jsfiddle.net/udarazz/qhane23o/1/" rel="nofollow noreferrer">https://jsfiddle.net/udarazz/qhane23o/1/</a></p>