Reply To: Responsive Data Table-Affecting Header + more

[Paulie_D]

Turning to the second part “keeping the header parts”…those are controlled by a media query and are positioned (generally) off the page absolutely

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Unfortunately that moves both header rows off the page which, if I understand correctly, you don’t want.

Well…each of those rows has a separate class so we can adjust the rule to only target the first row (which has a class of header_row) by changing it to this:

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
#page-wrap thead tr.header_row {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Remember we want to only target tables inside that page-wrap div.