JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive" id="test">
  <table class="table table-striped table-condensed"  style="z-index: 1">
    <thead>
      <tr>
        <th class="col-xs-2 col-md-3">Col 1</th>
        <th class="col-xs-1 col-md-2">Col 2</th>
        <th class="col-xs-1 col-md-2">Col 3</th>
        <th class="col-xs-1 col-md-2">Col 4</th>
        <th class="col-xs-1 col-md-1">Col 5</th>
        <th class="col-xs-1 col-md-1">Col 6</th>
        <th class="col-xs-1 col-md-1"></th>
      </tr>
    </thead>
    <tbody class="table-body">

      <tr>
        <td>$Col 1 Data</td>
        <td>$Col 2 Data</td>
        <td>$Col 3 Data</td>
        <td>$Col 4 Data</td>
        <td>$Col 4 Data</td>
        <td>$Col 5 Data</td>

        <!-- Action Dropdown-->
        <td>
          <div class="btn-group dropup pull-right">
            <button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle queryDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="title-element-name">Actions </span><span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a>Drop Option 1</a></li>
              <li><a>Drop Option 2</a></li>
              <li><a>Drop Option 3</a></li>
              <li><a>Drop Option 4</a></li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

SCSS

.dropdown-menu {
  overflow-y: visible !important;
  z-index: 999;
  ul {
    overflow-y: visible !important;
  }
  li {
    overflow-y: visible !important;
  }
  li:hover {
    cursor: pointer;
    cursor: hand;
  }
}

.title-element-name {
  color: #FF8200;
  font-weight: bold;
}

.table-responsive {
  z-index: 999;
  overflow-y: auto !important;
}

JavaScript

$(document).on('show.bs.dropdown',
                  function(e) {
     if ($(e.relatedTarget).hasClass('queryDropdown')) {
       $('#test').css('padding-top', '90px');
     }
   });
$(document).on('hide.bs.dropdown',
               function (e) {
  if ($(e.relatedTarget).hasClass('queryDropdown')) {
    $('#test').css('padding-top', '25px');
  }
});