JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="testTable">
<div class="testHeader">
<li class="testRow">
<span>ID</span>
<span>Name</span>
<span>Description</span>
<span>Other details 1</span>
<span>Other details 2</span>
</li>
</div>
<div class="secondHeader">
<li class="testRow">
<span>ID</span>
<span>Name</span>
<span>Description</span>
<span>Other details 1</span>
<span>Other details 2</span>
</li>
</div>
<div class="testBody">
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
...
CSS
body, .testTable{
margin: 0;
padding: 0;
}
.testTable {
display: table;
margin: 0px;
padding: 0px;
}
.testRow {
display: table-row;
}
.testRow > span {
list-style:none;
display: table-cell;
border: 1px solid #000;
padding: 2px 6px;
}
.testHeader {
display: table-header-group;
visibility: hidden;
}
.secondHeader {
display: table-header-group;
position: fixed;
top: 0px;
}
.secondHeader span {
background-color: #ccc;
}
.testBody {
display: table-row-group;
}