Removing duplication of content for small widths

[dracos]

For extremely large data sets, having both interfaces in the DOM will bloat an already large DOM tree. However, in most cases this is the more performant solution compared with dynamically reconstituting the DOM via matchMedia or (worse still) listening to the resize event.

I wondered if it would be possible to have the demo effect, without duplicating the data in the HTML, without using matchMedia or resize, but only CSS media queries. Not sure what you'll think, but here is what I came up with: https://codepen.io/dracos/pen/eMrpZB (I removed the sorting bits for ease of working it out.)

Apart from the CSS changes, included below, the HTML difference is to add the header cell contents to each cell (unless someone knows a way CSS could access its 'header'...? Couldn't see how headers could help, sadly):

@media (max-width:400px) {
  table, tbody, tr, th, td, caption { display: block; }
  thead { display: none; }
  th[scope=row] { width: 100%; padding:.5rem; margin: .5rem 0; }
  td { display: flex; border: none; padding: 0; flex: 0 0 50%; }
  td:before { display: block; padding-right:.5rem; font-weight:700; flex: 0 0 50%; content: attr(data-col); }
}

I have used a mechanism like this on a concert archive page in the past. For screen readers, not sure on current state of reading before content (looks like most do), and/or the :before could be hidden and the header row only visually hidden, so it's the same as at larger widths. Anyway, thought this might be of interest :)

[everdimension]

Just use match media.