JSFiddle - React, Tailwind, and code Playground

by Qpirate

HTML

<div class="scoll">
    <table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Rank</th>
                <th>Code</th>
                <th>Icon</th>
                <th>Message Text</th>
                <th>Progress</th>
                <th>Current</th>
                <th>X</th>
                <th>Y</th>
                <th>Z</th>
                <th>W</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="12">&nbsp;</td>
            </tr>
            <tr class="data-row" id="19">
                <td class="center">DDD</td>
                <!-- 4 alpha numeric -->
                <td class="center">111</td>
                <!-- 3 digits -->
                <td class="center">222</td>
                <!-- 3 digits -->
                <td class="center">
                    <img width="20" height="20" src="http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/apps/ark2.png">
                    <!-- icon -->
                </td>
                <td>Lorem ipsum</td>
                <!-- text may be long -->
                <td class="center">333</td>
                <!-- 3 alpha numeric -->
                <td class="center">444</td>
                <!-- 3 alpha numeric -->
                <td class="center">555</td>
                <!-- 3 alpha numeric -->
                <td class="center">666</td>
                <!-- 3 alpha numeric -->
                <td class="center">777</td>
                <!-- 3 alpha numeric -->
                <td class="center">888</td>
                <!-- 3 alpha numeric -->
                <td class="center">999</td>
                <!-- 3 alpha numeric -->
            </tr>
            <tr class="data-row" id="19">
                <td class="center">DDD</td>
                <!-- 4 alpha numeric -->
                <td class="center">111</td>
                <!-- 3 digits -->
                <td...

CSS

table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
}
div.scoll {
    overflow: scroll;
    height: 300px;
}
.center {
    text-align: center;
}
thead {
    position: static;
    width: 100%;
}
thead tr {
    position: fixed;
}
tbody {
}
thead tr {
    background-color: orange;
}
tr th:nth-child(1), tr td:nth-child(1) {
    background-color: orange;
}
tr th:nth-child(2), tr td:nth-child(2) {
    background-color: lightblue;
}
tr th:nth-child(3), tr td:nth-child(3) {
    background-color: orange;
}
tr th:nth-child(4), tr td:nth-child(4) {
    background-color: lightblue;
}
tr th:nth-child(5), tr td:nth-child(5) {
    background-color: orange;
}
tr th:nth-child(6), tr td:nth-child(6) {
    background-color: lightblue;
}
tr th:nth-child(7), tr td:nth-child(7) {
    background-color: orange;
}
tr th:nth-child(8), tr td:nth-child(8) {
    background-color: lightblue;
}
tr th:nth-child(9), tr td:nth-child(9) {
    background-color: orange;
}
tr th:nth-child(10), tr td:nth-child(10) {
    background-color: lightblue;
}
tr th:nth-child(11), tr td:nth-child(11) {
    background-color: orange;
}
tr th:nth-child(12), tr td:nth-child(12) {
    background-color: lightblue;
}