Bootstrap 3 - Tabs

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="http://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<div class="container">
    <div class="tabs_nav">
        <i class="glyphicon glyphicon-menu-left tab-prev" data-target="#nav-tabs1"></i>
        <i class="glyphicon glyphicon-menu-right tab-next" data-target="#nav-tabs1"></i>
    </div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="nav-tabs1">
        <li class="active"> <a href="#home" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> Home
          </a>
        </li>
        <li><a href="#profile" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Table
          </a>
        </li>
        <li class="active"> <a href="#home" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> Home
          </a>
        </li>
        <li><a href="#profile" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Table
          </a>
        </li>
        <li class="active"> <a href="#home" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> Home
          </a>
        </li>
        <li><a href="#profile" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i>...

CSS

.nav-tabs > li{
  float: none;
  display: inline-block;
}
.nav-tabs{
  white-space: nowrap;
  overflow: hidden;
}
.tabs_nav{
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 5px 10px 5px;
    background: #fff;
    width: 45px;
    display: none;
    z-index: 10;
}
.tabs_nav{
  -webkit-user-select: none;
  user-select: none;
}
.tabs_nav i:hover{
   color: #337ab7;
   cursor: pointer;
}
@media (max-width: 400px) {
   .tabs_nav{
       display: block;
   }
}

JavaScript

$(document).ready(function () {
    $('#example').DataTable({
        responsive: true
    });
    $('#exampleInTab').DataTable({
        responsive: true
    });
    $('.tab-prev').on('click', function(){
       $($(this).attr('data-target')).animate({scrollLeft:  '+=50'}, 100 ); 
    })
    $('.tab-next').on('click', function(){
       $($(this).attr('data-target')).animate({scrollLeft: '-=50'}, 100 )
    })
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust()
        .responsive.recalc();
});