stackoverflow Answer

https://stackoverflow.com/questions/38873638/boostrap-how-to-do-dropdowns-properly/38873763?noredirect=1#comment65109637_38873763

by princesodhi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="container">
  <table id="table" class="custom-class">
    <!-- NEW CLASS ADDED -->
    <tr>
      <td></td>
      <td>
        <div class="dropdown">
          <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
            <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
            <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
            <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>

</div>

CSS

#container {
  width: 400px;
  height: 300px;
  background-color: #ccc;
  overflow: auto;
}

#table {
  border: 1px solid #ddd;
  width: 380px;
}

#table td:last-child {
  width: 1%;
}


/** NEW CODE ADDED **/

.custom-class .dropdown-menu {
  right: 0;
  left: initial !important;
}


/** NEW CODE ADDED END **/