JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<div id="novoPedidoTabelaA_wrapper" class="dataTables_wrapper form-inline no-footer">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="DTFC_ScrollWrapper" style="position: relative; clear: both; height: 182px;">
<div class="DTFC_RightWrapper" style="position: absolute; top: 0; left: 0;">
<div class="DTFC_RightHeadWrapper" style="position: relative; top: 0; left: 0;">
<div class="DTFC_RightHeadBlocker DTFC_Blocker" style="position: absolute; top: 0; bottom: 0;"></div>
</div>
<div class="DTFC_RightBodyWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;">
<div class="DTFC_RightBodyLiner" style="position: relative; top: 0; left: 0; overflow-y: scroll;"></div>
</div>
<div class="DTFC_RightFootWrapper" style="position: relative; top: 0; left: 0;">
<div class="DTFC_RightFootBlocker DTFC_Blocker" style="position: absolute; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 3316px; padding-right: 0px;">
<table style="min-height: 100px !important; margin-left: 0px; width: 3316px;" class="table table-striped table-bordered top dataTable no-footer" cellspacing="0" width="100%" role="grid">
<thead>
...
JavaScript
$(function() {
$("td.itemEnviado:nth-child(5) input.data").focus(function() {
$(".dataTables_scrollBody").scrollLeft(0);
});
});