JSFiddle - React, Tailwind, and code Playground

by bg100

HTML

<div>test</div>
<div>test</div>
<div class="wrap">
    <div class="inner">
        <table id="data" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th><p>Jan</p></th>
                    <th><p>Feb</p></th>
                    <th><p>Mar</p></th>
                    <th><p>Apr</p></th>
                    <th><p>May</p></th>
                    <th><p>Jun</p></th>
                    <th><p>Jul</p></th>
                    <th><p>Aug</p></th>
                    <th><p>September</p></th>
                    <th><p>Oct</p></th>
                    <th><p>Nov</p></th>
                    <th class="last"><p>Dec</p></th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th><p>Jan</p></th>
                    <th><p>Feb</p></th>
                    <th><p>Mar</p></th>
                    <th><p>Apr</p></th>
                    <th><p>May</p></th>
                    <th><p>Jun</p></th>
                    <th><p>Jul</p></th>
                    <th><p>Aug</p></th>
                    <th><p>September</p></th>
                    <th><p>Oct</p></th>
                    <th><p>Nov</p></th>
                    <th class="last"><p>Dec</p></th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>3</td>
                    <td>5</td>
                    <td>1</td>
                    <td>1</td>
                    <td>3</td>
                    <td>1</td>
                    <td>5</td>
                    <td>7</td>
                    <td>1</td>
                    <td>1</td>
                    <td class="last">3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>3</td>
                    <td>5</td>
                    <td>1</td>
                    <td>1</td>
                    <td>3</td>
                    <td>1</td>
            ...

CSS

p {margin:0 0 1em 0}
table p {margin :0}
.wrap {
    position:absolute;
	height: 200px;	
	left: 0;
	right: 0;
    overflow:hidden;
    padding:40px 0 0;

}
.inner {
    width:100&#37;;
    height:100%;
    overflow-y:auto;
}
table {
    width:100%;
    margin:0 0 0 0px;
    border-collapse:collapse;
}
td {
    padding:5px;
    border:1px solid #000;
    text-align:center;
    background:yellow;
}
tfoot th, thead th {
    font-weight:bold;
    text-align:left;
    border:1px solid #000;
    padding:0 3px 0 5px;
    background:#ffffcc;
}
thead th {border:none;}
thead tr p {
    position:absolute;
    top:0;
}
.last {
    padding-right:15px!important;
}