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">
  <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">
            <button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle" 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 pull-right">
              <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 {
  li:hover {
    cursor: pointer;
    cursor: hand;
  }
}

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

JavaScript

$(function() {
  $('.table-responsive').on('shown.bs.dropdown', function(e) {
    var t = $(this),
      m = $(e.target).find('.dropdown-menu'),
      tb = t.offset().top + t.height(),
      mb = m.offset().top + m.outerHeight(true),
      d = 20; // Space for shadow + scrollbar.   
    if (t[0].scrollWidth > t.innerWidth()) {
      if (mb + d > tb) {
        t.css('padding-bottom', ((mb + d) - tb));
      }
    } else {
      t.css('overflow', 'visible');
    }
  }).on('hidden.bs.dropdown', function() {
    $(this).css({
      'padding-bottom': '',
      'overflow': ''
    });
  });
});