JSFiddle - React, Tailwind, and code Playground

by ycj28c

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.js"></script>
<html>
<head>
</head>

<body>
<div class="tab-content">
	<div align="center">
	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
	xxxxxxxxxxxxx This is the example xxxxxxxxxxxxxxxxx<br>
	xxxxxxxxxxxxx Scroll and resize Windows xxxxxxxxxxx<br>
	xxxxxxxxxxxxx Fix table header xxxxxxxxxxxxxxxxxxxx<br>
	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
	</div>
	<div id="votingResults" class="tab-pane fade in active">
		<div id="votingResultsTableWrapper">
			<table class="table votingResults tablesorter" id="votResultsTable">
			
			<thead id="votResHeader" style=""><tr style="height:50px"><th class="header" style="width: 49px;" id="vrNumberTh"><p>#</p></th><th class="header" style="width: 310px;" id="vrProposalTh"><p>PROPOSAL</p></th><th class="header" style="width: 165px;" id="vrTypeTh"><p>TYPE</p></th><th class="header" style="width: 147px;" id="vrProposedByTh"><p>PROPOSED BY</p></th><th class="header" style="width: 78px;" id="vrStatusTh"><p>STATUS</p></th><th class="header" style="width: 78px;" id="vrForTh"><p>FOR</p></th><th class="header" style="width: 78px;" id="vrAgainstTh"><p>AGAINST</p></th><th class="header" style="width: 78px;" id="vrAbstainTh"><p>ABSTAIN</p></th></tr></thead>
			
			<tbody id="votResBody"><tr><td id="vrNumberTd" style="width: 5%;"><span class="">1</span></td><td id="vrProposalTd"><span class="">Election of Directors</span></td><td id="vrTypeTd" style="width: 15%;"><span class="">Nomination/Governance Chair</span></td><td id="vrProposedByTd" style="width: 15%;"><span class="">Management</span></td><td id="vrStatusTd" style="width: 8%;"><span class="">Approved</span></td><td id="vrForTd" style="width: 8%;"><span...

CSS

.votingResults thead p{
	margin: 0;
}
.votingResults thead {
	background: #dfecec;
}
.votingResults th{
	border-right: 2px solid #fff;
	font-size: 11px;
	color: #000;
	text-align: center;
}
.votingResults th:first-child {
	padding-left: 15px; 
	padding-top: 10px;
}
.votingResults td {
	text-align: center;
	border-bottom: 1px solid #ddd;
    border-right: 2px solid #fff;
}
.votingResults td:first-child {
	text-align: left;
	padding-left: 15px;
}
.headingText {
	position: relative;
    top: 9px;
}
/* .tablesorter */
table.tablesorter {
	margin:0px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {	
	border-top: 1px solid #e0e0e0;	
	vertical-align: middle;
	font-family: "Avenir LT W02-85 Heavy",Helvetica,Arial,sans-serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	line-height: 14px;
	letter-spacing: 0.02em;
	vertical-align: middle;
	cursor: pointer;
	text-transform: uppercase;
}
table.tablesorter thead tr .header {
	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
	background-size : 8px 11px;
	
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
	font-weight: normal !important;
	background-size : 8px 5px;
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	font-weight: normal !important;
	background-size : 8px 5px;
}
tr.over td { 
	background-color:#FFFF99; 
}

/* voting result table*/
#votResultsTable {
    font-family: "Avenir LT W02-65 Medium",Helvetica,Arial,sans-serif;
    font-size: 12px;
   ...

JavaScript

$(document).ready(function(){

	// add table sort function
	$("#votResultsTable").tablesorter({
		textExtraction: 'complex',
		headers: {
			0: { sorter: 'proposalNumberParser'} //use custom parser
		}
	});
		
	syncVotingResultTableHeadAndBodyWidth = function() {
		$('#vrNumberTh').css({
			'width': $('#vrNumberTd').width() + parseInt($('#vrNumberTd').css('padding-right')) + parseInt($('#vrNumberTd').css('padding-left')) + parseInt($('#vrNumberTd').css('borderLeftWidth')) + parseInt($('#vrProposalTd').css('borderRightWidth')),
		});
		$('#vrProposalTh').css({
			'width': $('#vrProposalTd').width() + parseInt($('#vrProposalTd').css('padding-right')) + parseInt($('#vrProposalTd').css('padding-left')) + parseInt($('#vrProposalTd').css('borderLeftWidth')) + parseInt($('#vrProposalTd').css('borderRightWidth')),
		});
		$('#vrTypeTh').css({
			'width': $('#vrTypeTd').width() + parseInt($('#vrTypeTd').css('padding-right'))+parseInt($('#vrTypeTd').css('padding-left')) + parseInt($('#vrTypeTd').css('borderLeftWidth')) + parseInt($('#vrTypeTd').css('borderRightWidth')),
		});
		$('#vrProposedByTh').css({
			'width': $('#vrProposedByTd').width() + parseInt($('#vrProposedByTd').css('padding-right'))+parseInt($('#vrProposedByTd').css('padding-left')) + parseInt($('#vrProposedByTd').css('borderLeftWidth')) + parseInt($('#vrProposedByTd').css('borderRightWidth')),
		});
		$('#vrStatusTh').css({
			'width': $('#vrStatusTd').width() + parseInt($('#vrStatusTd').css('padding-right'))+parseInt($('#vrStatusTd').css('padding-left')) + parseInt($('#vrStatusTd').css('borderLeftWidth')) + parseInt($('#vrStatusTd').css('borderRightWidth')),
		});
		$('#vrForTh').css({
			'width': $('#vrForTd').width() + parseInt($('#vrForTd').css('padding-right'))+parseInt($('#vrForTd').css('padding-left')) + parseInt($('#vrForTd').css('borderLeftWidth')) + parseInt($('#vrForTd').css('borderRightWidth')),
		});
		$('#vrAgainstTh').css({
			'width': $('#vrAgainstTd').width() +...