JSFiddle - React, Tailwind, and code Playground

by KevinIsNowOnline

HTML

<div class="container">
    <table class="grid">
    <thead>
        <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell A</td>
            <td>Cell B</td>
            <td>Cell C</td>
            <td>Cell D</td>
        </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        
    </tbody>
    <div class="pagination">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            
        </ul>
    </div>
</table>
</div>

CSS

.container{
    position:relative;
}

.grid {
    border: 1px solid #c3c3c3;
    height:20px;
    display:block;
    overflow-y: scroll;
    overflow-x: scroll;
    height: 150px;
}



.grid thead{
     position:fixed;
    background-color:white;
}

.grid tbody{
    padding-top:100px
    width:10px;
    display:block;
    margin-top:25px;
}

.grid tbody td {
    border: 1px solid #c3c3c3;
    width:250px
}

.grid thead td{
     border: 1px solid #c3c3c3;
    width:260px;
    margin:0px;
    padding:0px;
}

.pagination li{
    list-style:none;
    border:0; margin:0; padding:0;

}