Table CSS Black Magic

<!DOCTYPE html>
<meta charset="utf-8">

Embed an HTML tables in an iframe/div
  while still being usefully scrollable.
*/

.wrapper {
  /*
    A static width **must** be set on the wrapper div
    assuming you're trying to insert the table into an iframe/div
    the width is probably already set
  */
  width: 400px;

/*
    A static height is not necessary, but again, assuming you're inserting into
    an iframe/div, this is probably set
  */
  height: 300px;

/*
    Allow the table to be horizontally scrollable
    such that the header (thead) and body (tbody) move as one
  */
  overflow-x: scroll;
}

/* Make the header and body columns stay aligned */
thead, tr {
  display: table;
  table-layout: fixed;

/*
    This is the sad part, there's no way (as far as I can figure out)
    to allow the table to render with dynamic width columns while still
    maintaining all the other scroll features.

So, you have to manually set this, you could programatically set it in JS
    based on the number of columns too, eg:
      element.style.width = numCols * colWidth;
  */
  width: 850px;
}

tbody {
  /* otherwise the body will ignore the height set below */
  display: block;

/* Allow the body to scroll vertically with a fixed header */
  /* This height is important, regardless of whether a height is set on the parent wrapper div */
  height: 300px;
  overflow-y: scroll;

/* otherwise the body may try to scroll horizontally and "lose alignment" with the header */
  overflow-x: hidden;
}

/*
  ##############################
  CSS MAGIC Part 2

Make the individual cells horizontally scrollable for long values that don't fit.

But also hide the scrollbar otherwise the values become unreadable.
*/

table {
  /* forces all cells to be one line, which is ok if we can scroll the cells horizontally */
  white-space: nowrap;
}

td {
  overflow-x: scroll;
  -ms-overflow-style: none;  /* IE 10+ */
  overflow: -moz-scrollbars-none;  /* Firefox */
}

td::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/*
  ##############################
  NOT IMPORTANT

These styles are merely contrast+style for demo purposes
*/

body {
  background-color: #e0e0e0;
}

.wrapper {
  float: left;
  margin-left: 20px;
  background-color: white;
}

.text {
  float: left;
  margin-left: 20px;
  width: 350px;
}

thead {
  background-color: #4a4a4a;
  color: #fff;
}

table {
  border-spacing: 0px;
}

th, td {
  padding: 2px 5px;
}

td {
  border: 1px solid gray;
}
</style>

<body>
  <div class="text">
    <h2>Embed an HTML table in a statically sized div</h2>
    <h4>(Useful in a dashboard or page with an iframe)</h4>
    <p>1. The table is both horizontally and vertically scrollable</p>
    <p>2. But, the header is fixed when vertically scrolling</p>
    <p>3. The cells are all horizontally scrollable, useful for long values</p>
    <p>4. Entirely in vanilla CSS :)</p>
  </div>
  <div class="wrapper">
    <table id="embedded-table"></table>
  </div>
</body>

// Body (actual data)
    tableHTML += "<tbody>";
    data.forEach(function(d) {
      tableHTML += "<tr>";
      for(key in d) {
        tableHTML += "<td>" + d[key] + "</td>";
      }
      tableHTML += "</tr>";
    });
    tableHTML += "</tbody>";

document.getElementById("embedded-table").innerHTML = tableHTML;
  });
</script>

https://d3js.org/d3.v4.min.js