JSFiddle - React, Tailwind, and code Playground
by naveen
HTML
<div class="container">
<div class="tableHeaderBg"></div>
<div class="tableScrollBar">
<table>
<thead>
<tr>
<th><div>Name</div></th>
<th><div>Email</div></th>
<th><div>Last Name</div></th>
<th><div>Phone</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
<td>32890</td>
<td>43728934287</td>
</tr>
<tr>
<td>Been</td>
<td>[email protected]</td>
...CSS
body {
font-family:arial;
font-size:11px;
}
.container {
border:1px solid #789B28;
height:200px;
margin:0 auto;
overflow:hidden;
padding:23px 0 0;
position:relative;
z-index:0;
}
.tableScrollBar table {
border-collapse:collapse;
width:100%;
}
.tableScrollBar table tr td,.container table tr th {
background-color:#e2e5bd;
border:solid 1px #fff;
padding:0 5px;
}
.tableScrollBar table tr td {
padding:5px;
line-height:15px;
}
.tableScrollBar table tr th div {
border-left:1px solid #FFFFFF;
line-height:24px;
margin:0 0 0 -6px;
padding:0 0 0 5px;
position:absolute;
text-align:left;
top:0;
}
.tableHeaderBg {
background-color:#99C332;
border-bottom:1px solid #FFFFFF;
height:23px;
left:0;
margin:1px 1px 0 0;
position:absolute;
right:0;
top:0;
z-index:0;
}
.tableScrollBar {
height:200px;
overflow-x:hidden;
overflow-y: auto;
}