JSFiddle - React, Tailwind, and code Playground
HTML
<div class="table-responsive table-striped">
<div id="tblLocationInfo_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<table id="tblLocationInfo" class="table table-hover dataTable" role="grid" style="width: 2400px;">
<thead>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="TaskType: activate to sort column ascending" style="width: 762px;">TaskType</th>
<th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="FromDate: activate to sort column ascending" style="width: 762px;">FromDate</th>
<th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="ToDate: activate to sort column ascending" style="width: 762px;">ToDate</th>
</tr>
</thead>
<tfoot>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<th rowspan="1" colspan="1"><input name="Inventory" data-index="0" class="form-control js-footer-search" type="text" placeholder="Search"></th>
<th rowspan="1" colspan="1"><input name="FromDate" data-index="1" class="form-control js-footer-search" type="text" placeholder="Search"></th>
<th rowspan="1" colspan="1"><input name="ToDate" data-index="2" class="form-control js-footer-search" type="text" placeholder="Search"></th>
</tr>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td>Main Location</td>
<td>02 Jul 2018 11:11:50:023</td>
<td>02 Jul 2018 11:54:13:760</td>
</tr>
<tr role="row" class="even">
<td>Main Location</td>
<td>02 Jul...
CSS
.table-responsive {
max-height: 200px;
overflow-x: auto !important;
overflow-y: auto !important;
}