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.
.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;}<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>