Responsive table with headers

Question

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 smartphone.

What I've already done is to define a CSS3 with media queries and a demo html table

The issue is that - with the current implementation - the headers are always on top while I'd like to show them together with the cell values for small width views (smartphone/tablet), but I've no idea how to achieve this without hard-coding the headers in the CSS3, but in a parametric way.

Answer 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: 12px 12px 12px 0;
}
.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;
}

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

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

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

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

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

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

<div class="header">
  <h1>Responsive Table</h1>
</div>

<div class="cols">
  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

</div>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

Answer 2

I think now I've found how to proceed.

I've to define the generic CSS classes for the desktop headers in the th tags and put the attribute display: none; for such classes in the preliminary media queries for smartphones and tablets.

Viceversa for the inline headers to be shown only on smaller size views.

I guess it should be the standard approach but I'm open to different ideas and suggestions. Anyway - as a side note - this kind of responsive table doesn't still look a practical approach to me: too many things could be designed in a different manner for mobile screens, not only headers and columns, but maybe also the number of records per page, the number of pages, etc... I guess I'd better off creating distinct mobile and desktop channels with completely different html pages