JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="container">
    
    <ul id="body">
        <li id="head">
            <div class="header-cell col1">One</div>
            <div class="header-cell col2">Two</div>
            <div class="header-cell col3">Three</div>
            <div class="header-cell col4">Four</div>
            <div class="header-cell col5">Five</div>
        </li>
        <li>
            <div class="body-cell col1">body row1</div>
            <div class="body-cell col2">body row2</div>
            <div class="body-cell col3">body row2</div>
            <div class="body-cell col4">body row2</div>
            <div class="body-cell col5">body row2 en nog meer</div>
        </li>
        <li>
            <div class="body-cell col1">body row1</div>
            <div class="body-cell col2">body row2</div>
            <div class="body-cell col3">body row2</div>
            <div class="body-cell col4">body row2</div>
            <div class="body-cell col5">body row2 en nog meer</div>
        </li>
        <li>
            <div class="body-cell col1">body row1</div>
            <div class="body-cell col2">body row2</div>
            <div class="body-cell col3">body row2</div>
            <div class="body-cell col4">body row2</div>
            <div class="body-cell col5">body row2 en nog meer</div>
        </li>
        <li>
            <div class="body-cell col1">body row1</div>
            <div class="body-cell col2">body row2</div>
            <div class="body-cell col3">body row2</div>
            <div class="body-cell col4">body row2</div>
            <div class="body-cell col5">body row2 en nog meer</div>
        </li>
        <li>
            <div class="body-cell col1">body row1</div>
            <div class="body-cell col2">body row2</div>
            <div class="body-cell col3">body row2</div>
            <div class="body-cell col4">body row2</div>
            <div class="body-cell col5">body row2 en nog meer</div>
        </li>
        <li>
            <div class="body-cell...

CSS

* {
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    height: 100%;
    width: 100%;
}
#container {
    height: 300px;
    width: 400px;

    position: relative;
    border-collapse: collapse;
    padding-top: 40px;
}
#head, #body{
    width: 500px;
}
#head {
    height: 40px;
    position: absolute;
    top: -40px;
}
#body {
    height: calc(100% - 40px);
    overflow-x: auto;
    overflow-y: auto;
    position:relative;
}
.header-cell {
    background-color: lightgray;
    text-align: left;
    height: 40px;
}
.body-cell {
    background-color: lightblue;
    text-align: left;
}

ul{
    display: block;
}

li{
    display: flex;
}
li > div{
    display: flex;
    flex: 1;
}