JSFiddle - React, Tailwind, and code Playground
by Ozren Tkalčec Krznarić
HTML
<ul class="testTable">
<div class="testHeader">
<li class="testRow">
<span>Identifier</span>
<span>EntityName</span>
<span>EntityCode</span>
<span>EntityProperty1</span>
<span>EntityProperty2</span>
<span>EntityProperty3</span>
</li>
</div>
<div class="secondHeader">
<li class="testRow">
<span>Identifier</span>
<span>EntityName</span>
<span>EntityCode</span>
<span>EntityProperty1</span>
<span>EntityProperty2</span>
<span>EntityProperty3</span>
</li>
</div>
<div class="testBody">
<li class="testRow">
<span>3435</span>
<span>{Removed _}</span>
<span>123/10006</span>
<span>0</span>
<span>2010-10-06 00:00:00</span>
<span>20</span>
</li>
<li class="testRow">
<span>6666</span>
<span>{Removed _____}</span>
<span>294/10006</span>
<span>0</span>
<span>2011-05-19 10:19:00</span>
<span>27</span>
</li>
<li class="testRow">
<span>3335</span>
<span>{Removed ____}</span>
<span>544/10006</span>
<span>0</span>
<span>2010-09-29 15:42:00</span>
<span>21</span>
</li>
<li class="testRow">
<span>3435</span>
<span>{Removed _}</span>
<span>123/10006</span>
<span>0</span>
<span>2010-10-06 00:00:00</span>
<span>20</span>
</li>
<li class="testRow">
<span>6666</span>
<span>{Removed _____}</span>
<span>294/10006</span>
<span>0</span>
<span>2011-05-19 10:19:00</span>
<span>27</span>
</li>
<li class="testRow">
<span>3335</span>
...
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;
}