JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id='requestTable'>
<tr>
<td colspan="4">
<div id="itemInformation">2) ITEM INFORMATION</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="itemLabel">CPM Item Number: </div>
<input class="itemText" type="text" data-bind=" value: cpmItemNumberItem, disable: cpmItemNumberItem" />
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2">
<div class="itemLabel">Resource Type:</div>
<input class="itemText" type="text" data-bind=" value: resourceType, disable: resourceType" />
</td>
<td colspan="2">
<div class="itemLabel">Product Category: </div>
<input class="itemText" type="text" data-bind=" value: cpmProductCategory, disable: cpmProductCategory" />
</td>
</tr>
<tr>
<td colspan="2">
<div class="itemLabel">Vendor (Primary Supplier):</div>
<input class="itemText" type="text" data-bind="value: vendor, disable: vendor" />
</td>
<td>
<div class="itemLabel">Manufacturer:</div>
<input class="itemText" type="text" data-bind="value: manufacturer, disable: manufacturer" />
</td>
</tr>
<tr>
<td colspan="2">
<div>Long Description:</div>
<input class="itemText" type="text" data-bind="value: longDescription, disable: longDescription" />
</td>
<td>
<div>Short Description(Lawson):</div>
<input class="itemText" type="text" data-bind=" value: shortDescription, disable: shortDescription" />
</td>
</tr>
<tr>
<td colspan="2">
<div>Manufacturer Catalog Number:</div>
<input class="itemText" type="text" data-bind=" value:...
CSS
table {
border: 1px solid #E8EEF4;
border-collapse: collapse;
}
body {
color: #696969;
font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
font-size: 1em;
}
JavaScript
var dtRequest = $('#requestTable').dataTable({
bJQueryUI: true,
"iDisplayLength": 100,
"aLengthMenu": [[20, 100, 500, 1000, 5000, -1], [20, 100, 500, 1000, 5000, "All"]]
});