JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<div id="financials">
<table>
<thead>
    <tr>
        <th>
            #s in USD
        </th>
        <th class="style-hidden">
            aaa
        </th>
        <th>
            FY'10
        </th>
        <th>
            FY'11
        </th>
        <th>
            FY'12
        </th>
        <th>
            FY'13
        </th>
        <th>
            FY'14
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            Revenue
        </td>
        <td class="style-hidden">
            Selling, General, and Administrative Expenses
        </td>
        <td>
            150
        </td>
        <td>
            200
        </td>
        <td>
            240
        </td>
        <td>
            500
        </td>
        <td>
            893
        </td>
    </tr>
    <tr>
        <td>
            Selling, General, and Administrative Expenses
        </td>
        <td class="style-hidden">
            Selling, General, and Administrative Expenses
        </td>
        <td>
            40
        </td>
        <td>
            50
        </td>
        <td>
            100
        </td>
        <td>
            230
        </td>
        <td>
            430
        </td>
    </tr>
    <tr>
        <td>
            Advertising
        </td>
        <td class="style-hidden">
            Selling, General, and Administrative Expenses
        </td>
        <td>
            0
        </td>
        <td>
            0
        </td>
        <td>
            0
        </td>
        <td>
            0
        </td>
        <td>
            0
        </td>
    </tr>
    <tr>
        <td>
            Operating Income/EBIT
        </td>
        <td class="style-hidden">
            Selling, General, and Administrative Expenses
        </td>
        <td>
            110
        </td>
        <td>
            150
        </td>
        <td>
            140
        </td>
        <td>
            270
        </td>
        <td>
            463
        </td>
   ...

CSS

#financials {
margin-left: 8em;
overflow-x: auto;
width:250px;
}

div#financials table {
font-family: Arial, Helvetica;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
}

div#financials table thead {
background-color: aliceblue;
}

div#financials table tbody tr td:nth-child(1), div#financials table thead tr th:nth-child(1) {
width:30px;
text-align: left;
position: absolute;
left: 0;
}

div#financials table thead tr th:nth-child(1) {
position: absolute;
width:50px;
}

div#financials table thead tr th:nth-child(2) {
display: none
}

.style-hidden {
    width: 0;
    display: block;
    opacity: 0;
}

div#financials table thead tr th {
padding: 0.5em 0.7em;
}