JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <table>
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Four</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body {
    margin: 0;
}
#container {
    width: 600px;
    height: 2000px;
}
table {
    border-collapse: collapse; 
    table-layout: fixed; 
    width: 100%;
}
thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 10;
}
th {
    background: #ccc;
    border: 1px solid red;
    background-clip: padding-box;
    text-align: left;
    font-weight: normal;
    padding: 2px 4px;
}
th:not(:last-child){
    border-right: 2px dotted red;
}
td {
    border: 1px solid grey;
    padding: 2px 4px;
}