D3 Examples - Table CSS Black Magic

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
/*
  ##############################
  CSS MAGIC Part 1
​
  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>
​
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
  /*
    ##############################
    NOT IMPORTANT
    Javascript to load the data into a HTML table
    The important black magic css is in the style above ^
  */
  d3.csv("billionaire.csv", function(error, data) {
    // Header
    var tableHTML = "<thead>";
    tableHTML += "<tr>";
    for(key in data[0]) {
      tableHTML += "<th>" + key + "</th>";
    }
    tableHTML += "</tr>";
    tableHTML += "</thead>";
​
    // 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>
​
    