JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<!-- For older Browsers (IE8) -->
<!--[if IE 8]>
    <style>
        table.tableSection>thead>tr:after, table.tableSection>tbody>tr:after {
            content :".";
            margin-left: -3px;
            visibility: hidden;
        }
    </style>
<![endif]-->
<table class="tableSection">
    <thead>
        <tr>
            <th><span class="text">album</span>

            </th>
            <th><span class="text">song</span>

            </th>
            <th><span class="text">genre</span>

            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>album 0</td>
            <td>song0</td>
            <td>genre0</td>
        </tr>
        <tr>
            <td>album 1</td>
            <td>song 1</td>
            <td>genre1</td>
        </tr>
        <tr>
            <td>album2</td>
            <td>song 2</td>
            <td>genre2</td>
        </tr>
        <tr>
            <td>album3</td>
            <td>song 3</td>
            <td>genre3</td>
        </tr>
        <tr>
            <td>album4</td>
            <td>song 4</td>
            <td>genre 4</td>
        </tr>
        <tr>
            <td>album5</td>
            <td>song 5</td>
            <td>genre 5</td>
        </tr>
        <tr>
            <td>album 6</td>
            <td>song6</td>
            <td>genre6</td>
        </tr>
        <tr>
            <td>album 7</td>
            <td>song7</td>
            <td>genre7</td>
        </tr>
        <tr>
            <td>album8</td>
            <td>song8</td>
            <td>genre 8</td>
        </tr>
        <tr>
            <td>album9</td>
            <td>song9</td>
            <td>genre9</td>
        </tr>
        <tr>
            <td>album10</td>
            <td>song 10</td>
            <td>genre10</td>
        </tr>
        <tr>
            <td>album11</td>
            <td>song 11</td>
            <td>genre11</td>
        </tr>
        <tr>
            <td>album12</td>
            <td>song12</td>
            <td>genre12</td>
...

CSS

table.tableSection {
        display: table;
        width: 100%;
    }
    table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    table.tableSection tbody {
        overflow: auto;
        /* Giving height to make the tbody scroll */
        /* Giving height dynamically is recommended */
        height: 150px;
    }
    table.tableSection tr {
        width: 100%;
        display: table;
        /* Keeping the texts of both thead and tbody in same alignment */
        text-align: left;
    }
    table.tableSection th, table.tableSection td {
        width: 33%;
    }
    table.tableSection tr>td:last-child {
        /* removing fraction of width i.e 2% to align the tbody columns with thead columns. */
        /* It is must as we need to consider the tbody scroll width too */
        /* if the width is in pixels, then (width - 18px) would be enough */
        width: 31%;
    }
    /** for older browsers (IE8), if you know number of columns in your table **/
    table.tableSection tr>td:first-child + td + td {
        width : 31%;
    }