JSFiddle - React, Tailwind, and code Playground

by tsayen

HTML

<div class="window">
    <div class="parent">
        <div class="toolbar">Toolbar</div>
        <table class="table">
            <thead>
                <th>
                    <td>header</td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

* {
    margin: 1px 1px 1px 1px;
    box-sizing: border-box;
}
.window {
    height: 10em;
}
.parent {
    height: 100%;
    border: 1px solid red;
    display: flex;
    flex-flow: column;
}
.toolbar {
    flex: 0 0 auto;
    border: 1px solid blue;
}
.table {
    flex: 1 1 auto;
    min-height: 50%;
    width: 100%;
    display: flex;
    flex-flow: column;
    border: 1px solid green;
    background-color: red;
}
.table thead {
    flex: 0 0 content;
}
.table tbody {
    display: block;
    overflow-y: scroll;
    overflow-x: auto;
    flex: 1 1 auto;
}
.table tbody tr, .table thead {
    display: table;
    table-layout: fixed;
    width: 100%;
}