使用 CSS Grid 和 Div 元素的数据表

Answer 1

要使用 rowspan，我们使用 'grid-row' CSS 属性 要使用 colspan，我们使用 'grid-column' CSS 属性 尝试在代码中使用它-

HTML-

<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" style="grid-column: span 2;">Rahul Saha</div>
          <div class="grid-col grid-col-tbody">20</div>
        </div>
        <div class="grid-row">
          <div class="grid-col grid-col-tbody" style="grid-row: span 2;">3</div>
          <div class="grid-col grid-col-tbody">Priya</div>
          <div class="grid-col grid-col-tbody">Singh</div>
          <div class="grid-col grid-col-tbody">30</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS-

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

.grid-col-head {
  font-weight: bold;
}

.grid-col-tbody {
  background-color: #fff;
}