JSFiddle - React, Tailwind, and code Playground

by jblasco

HTML

<div class="container">
<div class="scroll">

<table cellspacing="0" cellpadding="0" class="myTable">
    <thead>
        <tr>
            <th><p>Product Code</p></th>
            <th><p>Design Name</p></th>
            <th><p>Ricoh</p></th>
            <th><p>Nashuatec</p></th>
            <th><p>Rex Rotary</p></th>
            <th><p>Gestetner</p></th>
            <th><p>Infotec</p></th>
            <th><p>Lanier</p></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><p>Product Code</p></th>
            <th><p>Design Name</p></th>
            <th><p>Ricoh</p></th>
            <th><p>Nashuatec</p></th>
            <th><p>Rex Rotary</p></th>
            <th><p>Gestetner</p></th>
            <th><p>Infotec</p></th>
            <th><p>Lanier</p></th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="8"><div class="headalign"><a href="../contents/af1022_1027.htm"> 1022/1027/1032, 2022/2027/2032 series</a></div></td>
        </tr>
        <tr>
            <td><a href="../contents/af1022_1027.htm">B022</a></td>
        <td><a href="../contents/af1022_1027.htm">Russian C2a</a></td>
        <td><a href="../contents/af1022_1027.htm"> 1022</a></td>
        <td><a href="../contents/af1022_1027.htm">2205</a></td>
        <td><a href="../contents/af1022_1027.htm">2238</a></td>
        <td><a href="../contents/af1022_1027.htm">2212</a></td>
        <td><a href="../contents/af1022_1027.htm">IS 2022</a></td>
        <td><a href="../contents/af1022_1027.htm">5622</a></td>
    </tr>
    <tr>
        <td><a href="../contents/af1022_1027.htm">B027</a></td>
        <td><a href="../contents/af1022_1027.htm">Russian C2b</a></td>
        <td><a href="../contents/af1022_1027.htm"> 1027</a></td>
        <td><a href="../contents/af1022_1027.htm">2705</a></td>
        <td><a href="../contents/af1022_1027.htm">2738</a></td>
        <td><a href="../contents/af1022_1027.htm">2712</a></td>
        <td><a href="../contents/af1022_1027.htm">IS...

CSS

* {
    padding:0;
    margin:0;
}
table {
    width:100%;
    color: #000;
    font-size: 0.9em;
    text-align:center;
    vertical-align:middle;
    vertical-align:center;
}
th {
    font-weight:bold;
    text-align:left;
}
.container {
    position:relative;
    padding:1.6em 0 0 0;
    width:80%;
    background:#fff;
    margin:0 auto;
}
.scroll {
    overflow:auto;
    overflow-x:hidden;
    height:19.6em;
}
.container thead tr {
    position:absolute;
    top:0;
    margin-right:16px;
    background:#fff;
}
.container th, .container td {
    width:100em;
}
td {
    background:#e5f1f4;
    border-bottom: 1px solid #ccc;
    padding: 1px 5px;
    text-align:center;
    vertical-align: middle;
    height:100%;
}
th {
    background:#328aa4;
    color:#fff;
    border-top: 3px double #ccc;
    border-bottom: 3px double #ccc;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    text-align:center;
}
tr.alt td {
    background-color: #f8fbfc;
}
tfoot {
    display:none;
}
table a:visited, table a:active, table a:link {
    text-decoration: none;
    color: black;
    display: block;
}
table a:hover {
    text-decoration: none;
    color: black;
    background-color: #B0E2FF;
    display: block;
}
div.headalign {
    text-align: left;
    font-style:italic;
}