JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<table class="table-container">
    <tbody>
        <tr>
            <td>header col 1</td>
            <td>header col 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="scroll-container">
                    <table>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                        <tr>
                            <td>Entry 1</td>
                            <td>entry 2</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.table-container {
    border:1px solid #ccc;
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    border-top:1px solid #ccc;
    max-height: 150px;
    overflow-y: scroll;
}

.scroll-container td:first-child{
    border-right: 1px solid #ccc;
}
.scroll-container td{
    border-bottom: 1px solid #ccc;    
}
tr{
    height: 50px;
    padding:0;
}
td{
    padding:2px;
}