JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mstrWrapper"></div>
<input type="button" value="LOAD" id="load">
CSS
#mstrWrapper {
position: relative;
height: 200px;
width: 800px;
border: 1px solid #808080;
overflow-y: scroll;
overflow-x: scroll;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;
}
#mstrTable {
width: 800px;
color: #235A81;
font-family: Arial;
font-size: 9pt;
border: 0px;
}
#mstrTable th, #mstrTable td {
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
padding: 3px;
}
#mstrTable th {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
width: 110px;
height: 18px;
border-bottom: 1px solid #808080;
border-top: 0px;
}
#mstrTable tbody tr:first-child td {
padding: 3px 3px 3px 3px;
}
#mstrTable tr.normal td {
color: #235A81;
background-color: white;
}
#mstrTable tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
JavaScript
var table;
var tbody;
var ishigh;
$("#load").on("click",writeit);
function writeit() {
var html = '<table id="mstrTable" cellspacing="0" cellpadding="0" class="ui-widget-content">\n';
html += '<thead>\n';
html += '<tr> \n';
html += '<th>File Number<\/th>\n';
html += '<th>Date1<\/th>\n';
html += '<th>Date2<\/th>\n';
html += '<th>Status<\/th>\n';
html += '<th>Num.<\/th>\n';
html += '<\/tr>\n';
html += '<\/thead>\n';
html += '<tbody>\n';
html += '<tr> \n';
html += '<td>KABC<\/td>\n';
html += '<td>09\/12\/2002<\/td>\n';
html += '<td>09\/12\/2002<\/td>\n';
html += '<td>Submitted<\/td>\n';
html += '<td>0<\/td>\n';
html += '<\/tr>\n';
html += '<tr> \n';
html += '<td>KCBS<\/td>\n';
html += '<td>09\/11\/2002<\/td>\n';
html += '<td>09\/11\/2002<\/td>\n';
html += '<td>Lockdown<\/td>\n';
html += '<td>2<\/td>\n';
html += '<\/tr>\n';
html += '<tr>\n';
html += '<td>WFLA<\/td>\n';
html += '<td>09\/11\/2002<\/td>\n';
html += '<td>09\/11\/2002<\/td>\n';
html += '<td>Submitted<\/td>\n';
html += '<td>1<\/td>\n';
html += '<\/tr>\n';
html += '<tr> \n';
html += '<td>WPPP<\/td>\n';
html += '<td>03\/19\/2003<\/td>\n';
html += '<td>03\/19\/2003<\/td>\n';
html += '<td>In-Progress<\/td>\n';
html += '<td>0<\/td>\n';
html += '<\/tr>\n';
html += '<tr> \n';
html += '<td>WRRR<\/td>\n';
html += '<td>02\/19\/2002<\/td>\n';
html += '<td>02\/19\/2002<\/td>\n';
html += '<td>Submitted<\/td>\n';
html += '<td>5<\/td>\n';
html += '<\/tr>\n';
html += '<tr>\n';
html += '<td>WTTT<\/td>\n';
html += '<td>02\/19\/2002<\/td>\n';
html += '<td>02\/19\/2002<\/td>\n';
html += '<td>In-Progress<\/td>\n';
html += '<td>0<\/td>\n';
html += '<\/tr>\n';
html += '<tr> \n';
html += '<td>WYYD<\/td>\n';
html += '<td>02\/11\/2002<\/td>\n';
html += '<td>02\/11\/2002<\/td>\n';
html +=...