如何在没有滚动的情况下打开div中的下拉列表？

Question

我有一个宽度恒定的DIV，并且有一个包含5列和2行的表。每个单元格内都有一个DropDown。

我想横向滚动，但我不想在DIV中使用滚动打开DropDown，我想要离开div。

怎么做？

$('.selectpicker').selectpicker({
    noneResultsText: 'موردی یافت نشد'
});

#a1{
  border:1px solid red;
  overflow-y:auto;
  width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet" />
 
<div id="a1">
<table class="table">
<thead>
  <tr>
    <th>hi</th>
    <th>bye</th>
    <th>hi</th>
    <th>bye</th>
    <th>hi</th>
  </tr>
</thead>
<tbody>
<tr>
   <td>
   <select class="selectpicker">
<option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
</select>
</td>
    <td>
    <select class="selectpicker">
<option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
</select>
</td>
    <td>
    <select class="selectpicker">
<option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
</select></td>
    <td>
    <select class="selectpicker">
<option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
</select>
</td>
    <td>
    <select class="selectpicker">
<option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
</select>
</td>
</tr>
</tbody>
</table>

</div>





<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>