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