Bootstrap Button Dropdown Input Controls
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://drvic10k.github.io/bootstrap-sortable/Contents/bootstrap-sortable.css">
<script src="https://drvic10k.github.io/bootstrap-sortable/Scripts/bootstrap-sortable.js"></script>
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="table-responsive">
<table id="MyTable" class="table table-striped table-condensed table-hover sortable">
<thead>
<tr>
<th>GROUP</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select AA</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Another item</a></li>
</ul>
</div>
</td>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select BB</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Another item</a></li>
</ul>
</div>
</td>
<td>BB</td>
<td>BB</td>
<td>BB</td>
</tr>
<tr>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select CC</span> <span...
JavaScript
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "inherit" );
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})