I created a data table using CSS Grid and Div elements. Previously, I used Display Flex, but I had trouble implementing rowspan and colspan with Div elements.
HTML Code:
<div class="container">
<div class="grid-responsive">
<div class="grid rounded border">
<div class="grid-header">
<div class="grid-row">
<div class="grid-col grid-col-head">#</div>
<div class="grid-col grid-col-head">First Name</div>
<div class="grid-col grid-col-head">Last Name</div>
<div class="grid-col grid-col-head">Roll</div>
</div>
</div>
<div class="grid-body">
<div class="grid-row">
<div class="grid-col grid-col-tbody">1</div>
<div class="grid-col grid-col-tbody">Sandip</div>
<div class="grid-col grid-col-tbody">Saha</div>
<div class="grid-col grid-col-tbody">10</div>
</div>
<div class="grid-row">
<div class="grid-col grid-col-tbody">2</div>
<div class="grid-col grid-col-tbody">Rahul</div>
<div class="grid-col grid-col-tbody">Saha</div>
<div class="grid-col grid-col-tbody">20</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.grid-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid .grid-header{ background-color: #e2e3e5; color: #000; }
.grid .grid-row{ display: grid; grid-template-columns: 50px repeat(2, 1fr) 100px; }
.grid .grid-row .grid-col{ padding: .5rem .5rem; border-right: 1px solid #cfd0d2; border-bottom: 1px solid #cfd0d2; }
.grid .grid-row .grid-col:last-child{ border-right: none; }
.grid .grid-row:last-child .grid-col{ border-bottom: none; }
Demo