JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="content">
<div class="objects-wrap">
<table class="table table-striped">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>John</td>
<td>Doe</td>
<td>John</td>
<td>Doe</td>
<td>Doe</td>
<td>
<div class="dropdown">
<div class="optional-actions ">
<i class="fa fa-ellipsis-v dropdown-toggle" data-toggle="dropdown"></i>
<ul class="dropdown-menu dropdown-menu-right with-caret">
<li class="">
<a title="Edit" rel="tooltip" data-placement="bottom" href="javascript:void(0)" ng-click="action(act.id, gridItem)" class=""><i class="fa mr5 fa-pencil"></i>Edit</a>
</li>
...
CSS
.content {
margin: 0 auto;
display: inline-block;
position: relative;
overflow: visible;
}
.objects-wrap {
position: absolute;
overflow: scroll;
overflow-y: hidden;
width: 100%;
min-height: 300px;
}
.content {
width: 70%;
margin: 0 auto;
}