JSFiddle - React, Tailwind, and code Playground
by John Grivas
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
/*spreadsheet*/
.row:nth-child(odd)
{
background: rgba(0,0,0,0.05);
}
/* Similarly we can define another rule for even */
.bodyTable td
{
white-space: normal; /*text-overflow: ellipsis;*/
overflow: hidden;
word-spacing: normal;
font-family: Sans-Serif;
font-size: 14px;
text-align: right;
}
.bodyTable tr
{
height: 20px;
}
.bodyTable tr:hover
{
background-color: rgba(0,0,0,0.3);
}
.headerTable
{
text-align: justify;
vertical-align: middle;
word-spacing: normal;
border-spacing: 0px;
border-style: solid;
caption-side: top;
word-wrap:break-word;
border-collapse: collapse;
font-family: Sans-Serif;
font-size: 10px;
}
.th
{
background-color: Red;
}
.scroll
{
overflow: auto;
}
</style>
</head>
<body>
<div id="tableTag">
<table width="1903px">
<tr>
<td>
<table class="headerTable" width="1878px">
<tr>
<th>
sample1
</th>
<th>
sample2
</th>
<th>
sample3
</th>
<th>
sample
</th>
<th>
testsample
</th>
...