Responsive Table 2 – Evo Web Dev

View at link at bottom. This table does not show active CSS and javascript.

HTML

Responsive Table That Also Scrolls if Necessary

Books I May or May Not Have Read
Author	Title	Year	ISBN-13	ISBN-10
Miguel De Cervantes	The Ingenious Gentleman Don Quixote of La Mancha	1605	9783125798502	3125798507
Mary Shelley	Frankenstein; or, The Modern Prometheus	1818	9781530278442	1530278449
Herman Melville	Moby-Dick; or, The Whale	1851	9781530697908	1530697905
Emma Dorothy Eliza Nevitte Southworth	The Hidden Hand	1888	9780813512969	0813512964
F. Scott Fitzgerald	The Great Gatsby	1925	9780743273565	0743273567
George Orwell	Nineteen Eighty-Four	1948	9780451524935	0451524934

Note that this is an accessible (keyboard and screen reader) responsive (width and print) table. You can read everything that went into the code in the tutorial (so you can make your own).

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body { font-size: 100%; color: #333; font-family: Lato, Arial, sans-serif; padding: 0; margin: 0; }
main { display: block; box-sizing: border-box; width: auto; padding: 1em 2vw; margin: 1em 2vw; color: #000; background-color: rgba(204, 204, 204, 0.7); border: 0.07em solid rgba(0, 0, 0, 0.5); border-radius: 0.5em; }
table { margin: 1em 0; border-collapse: collapse; /*width: 100%; */ }
caption { text-align: left; font-style: italic; padding: 0.25em 0.5em 0.5em 0.5em; }
th,
td { padding: 0.25em 0.5em 0.25em 1em; vertical-align: text-top; text-align: left; text-indent: -0.5em; }
th { vertical-align: bottom; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-weight: bold; }
td::before { display: none; }
tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.25); }
tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.5); }
td:nth-of-type(2) { font-style: italic; }
th:nth-of-type(3),
td:nth-of-type(3) { text-align: right; }

div { overflow: auto; }

@media screen and (max-width: 37em), print and (max-width: 5in) {
  table,
  tr,
  td { display: block; }
  tr { padding: 0.7em 2vw; }
  th,
  tr:first-of-type { display: none; }
  td::before { display: inline; font-weight: bold; }
  td { display: grid; grid-template-columns: 4em auto; grid-gap: 1em 0.5em; }
  caption { font-style: normal; background-color: rgba(0, 0, 0, 0.35); color: #fff; font-weight: bold; }
  td:nth-of-type(3) { text-align: left; }
  td:nth-of-type(4), td:nth-of-type(5) { text-align: right; width: 12em; }
  td:nth-of-type(4)::before, td:nth-of-type(5)::before { text-align: left; }
  td:nth-of-type(2)::before { font-style: normal; }
}

@media print {
  body { font-size: 6pt; color: #000; background-color: #fff; background-image: none;
  }
  body,
  main { margin: 0; padding: 0; background-color: #fff; border: none; }
  table { page-break-inside: avoid; }
  div { overflow: visible; }
  th { color: #000; background-color: #fff; border-bottom: 1pt solid #000; }
  tr { border-top: 1pt solid #000; }
}

@media print and (max-width: 5in) {
  caption { color: #000; background-color: #fff; border-bottom: 1pt solid #000; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

JAVASCRIPT

function ResponsiveCellHeaders(elmID) {
  try {
    var THarray = [];
    var table = document.getElementById(elmID);
    var ths = table.getElementsByTagName("th");
    for (var i = 0; i < ths.length; i++) {
      var headingText = ths[i].innerHTML;
      THarray.push(headingText);
    }
    var styleElm = document.createElement("style"),
      styleSheet;
    document.head.appendChild(styleElm);
    styleSheet = styleElm.sheet;
    for (var i = 0; i < THarray.length; i++) {
      styleSheet.insertRule(
        "#" +
          elmID +
          " td:nth-child(" +
          (i + 1) +
          ')::before {content:"' +
          THarray[i] +
          ': ";}',
        styleSheet.cssRules.length
      );
    }
  } catch (e) {
    console.log("ResponsiveCellHeaders(): " + e);
  }
}
ResponsiveCellHeaders("Books");