Responsive Table With Headers

I've tried to render a responsive table layout so that it shows a line of 12 columns on a desktop per each record of a table, 3 lines of 4 columns on a tablet and 6 of 2 cols on a

Solution 1:

You could also use flexbox and do a column based structure.

Updated fiddle

Stack snippet

* {
  box-sizing: border-box;
}

.cols {
  display: inline-flex;
  min-width: 100%;
  border: 1px solid gray;
  counter-reset: col;
}  
.col {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  counter-increment: col;
}
.col:first-child div {
  padding: 12px;
}
.col:not(:first-child) div {
  padding: 12px12px12px0;
}
.col > div:first-child {
  background: #4CAF50;
  color: white;
}
.col > div:not(:first-child) {
  border-top: 1px solid gray;
}
.col > div {
  white-space: nowrap;
}
.col > div::after {
  content: counter(col);
}
.col > div:nth-child(even) {
  background-color: #e2e2e2;
}

@mediaonly screen and (max-width: 1024px) {
  /* For smaller desktop: */.cols {
    flex-wrap: wrap;
  }
  .col {
    min-width: calc(100% / 6);
  }
}

@mediaonly screen and (max-width: 768px) {
  /* For tablets: */.col {
    min-width: calc(100% / 4);
  }
}

@mediaonly screen and (max-width: 600px) {
  /* For mobile phones: */.col {
    min-width: calc(100% / 2);
  }
}

.pagination {
    display: inline-block;
}

.paginationa {
    color: black;
    float: left;
    padding: 8px16px;
    text-decoration: none;
}

.paginationa.active {
    background-color: #4CAF50;
    color: white;
}

.paginationa:hover:not(.active) {background-color: #ddd;}

<divclass="header"><h1>Responsive Table</h1></div><divclass="cols"><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div><divclass="col"><div>
      Header
    </div><div>
      Flight
    </div><div>
      Voyage
    </div><div>
      Pipeline
    </div></div></div><divclass="pagination"><ahref="#">&laquo;</a><ahref="#">1</a><aclass="active"href="#">2</a><ahref="#">3</a><ahref="#">4</a><ahref="#">5</a><ahref="#">6</a><ahref="#">&raquo;</a></div><divclass="footer"><p>Resize the browser window to see how the content respond to the resizing.</p></div>