When your website means business.

CSS, Javascript, Responsive, Tables | Type: CSSResponsive Table 2

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");

Reference Links