JSFiddle - React, Tailwind, and code Playground

HTML

<table class="main">
    <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>
                <table>
                    <tbody>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                        <tr>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                        </tr>
                        <tr>
       ...

CSS

table.main {
        display: table;
        width: 100%;
    }
    table.main > thead, table.main > tbody {
        float: left;
        width: 100%;
    }
    table.main > tbody {
        overflow: auto;
        height: 150px;
    }
    table tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    table th, table td {
        width: 33%;
    }
    table.main table tbody:nth-child(odd) {
        background: #CCC;
    }
    table.main table tbody:hover td[rowspan], table.main table tr:hover td {
        background: red;
    }
    table.main table {
        width: 100%;
        border-collapse: collapse;
    }
    table.main table td, table.main table th {
        padding: 20px;
        border: 1px solid black;
    }