<figure class="figure">
  <table class="barChart_h">
    <caption>Q1: My waiter provided good service tonight.</caption>

    <tbody>
      <!-- Y-axis -->
      <tr>
        <th class="blankCell"></th>
        <th class="y-axis">
          <div class="y-axis-title"># of Responses</div>
          <ol class="y-axis-labels">
            <li class="zero"><b>0</b></li>
            <li><b>20</b></li>
            <li><b>40</b></li>
            <li><b>60</b></li>
            <li><b>80</b></li>
            <li><b>100</b></li>
          </ol>
        </th>
      </tr>

      <!-- Data Rows -->
      <tr class="firstRow">
        <th scope="row">Stongly Disagree:</th>
        <td><span style="width:10%"><b>10</b></span></td>
      </tr>
      <tr>
        <th scope="row">Disagree:</th>
        <td><span style="width:30%"><b>30</b></span></td>
      </tr>
      <tr>
        <th scope="row">Neither:</th>
        <td><span style="width:20%"><b>20</b></span></td>
      </tr>
      <tr>
        <th scope="row">Strongly Agree:</th>
        <td><span style="width:70%"><b>70</b></span></td>
      </tr>
      <tr class="lastRow">
        <th scope="row">Strongly Agree:</th>
        <td><span style="width:40%"><b>40</b></span></td>
      </tr>

    </tbody>

  </table>
</figure>

/* nope - I don't like this as it is too far reaching and breaks form controls
    * {
      margin: 0;
      padding: 0;
    }
*/

html,
body {
  margin: 0;
  padding: 0;
}
body {
  padding: 0 10px;
}
/* nope 
*,
*:before,
*:after {
  box-sizing: border-box;
}
*/
/* This is better
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: normal;
  line-height: 1.4em;
  font-size: 0.9em;
  color: #000;
}

/**************************************************************************/
/* DESKTOP                                                                */
/**************************************************************************/
/* FIGURE */
/*use classes as you don't want to style every figure in your document like this.*/
.figure {
  min-width: 200px;
  max-width: 780px;
  margin: 2rem;
  padding: 1.5rem 2rem 2rem;
  border: 1px solid #000;
}

/* TABLE */
.barChart_h {
  table-layout: fixed; /* enforce cell widths*/
  /* display: block; nope we want a table this time */
  /*height: auto; don;t need this*/
  /* Do I need this? */
  width: 100%; /* yes now needed for full width table (display:table)*/
  overflow-wrap: break-word;
  border-spacing: 0;
}

/* CAPTION */
.barChart_h caption {
  /*display: block;Nope we want a table caption */
  padding: 0 0 1rem 0;
  line-height: 1.1;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
}

/* TBODY */
.barChart_h tbody {
  /* display: block; nope we want table behaviour still*/
}
/* We don't need this in this example as we are not linearising the table*/
/*
.barChart_h tbody:after {
  /* For IE9 and under, need to enclose floats... */
/*
  content: "";
  display: block;
  clear: both;
  height: 0;
}
*/

/* TH+TD */
.barChart_h tbody tr.firstRow th,
.barChart_h tbody tr.firstRow td {
  padding: 1rem 0 0.5rem 0;
  /* Add extra vertical padding. */
}

.barChart_h tbody th,
.barChart_h tbody td {
  padding: 0.5rem 0 0.4rem 0;
  /* Space around Bars. */
}

.barChart_h tbody tr.lastRow th,
.barChart_h tbody tr.lastRow td {
  padding: 0.5rem 0 1rem 0;
  /* Add extra vertical padding. */
}

/* TH */
.barChart_h tbody th {
  font-weight: normal;
  text-align: right;
}

/* TD */
.barChart_h tbody td {
  border-left: 2px solid #f00;
  /* X-AXIS. (vertical) */
  border-right: 1px solid #ddd;
  /* Finish out repeating vertical-gridlines. */
  background-image: linear-gradient(to right, #ddd 1px, transparent 1px);
  /* Create grey-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
  background-size: 10% 100%;
  /* Go right in 10% increments. */
}

/* BARS */
.barChart_h tbody td span {
  position: relative;
  /* Needed for absolute-positioning of Bar-value. */
  display: block;
  /* Expands <span> to fill <td> */
  height: 20px;
  background: #99ffff;
  /* Aqua (default) */
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
}

/* BAR-VALUES */
.barChart_h tbody td span b {
  position: absolute;
  left: 100%;
  top: 0;
  right: auto;
  bottom: 0;
  display: block;
  padding: 0 0 0 0.5rem;
  font-weight: normal;
}

/* Y-AXIS */
.barChart_h tbody th.blankCell {
  width: 22%; /* Adjust to suit butwe need a width or both cells will be 50% by default*/
}

.barChart_h tbody th.y-axis {
  position: relative;
  /* New */
  padding-bottom: 1.4rem;
  border-bottom: 2px solid #f00;
  /* Y-AXIS. (horizontal) */
  background-color: #fff;
}

/* Y-AXIS TITLE */
.barChart_h tbody div.y-axis-title {
  display: block;
  text-align: center;
  font-weight: bold;
}

/* Y-AXIS LABELS */
.barChart_h tbody ol.y-axis-labels {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  /* Create Flexbox (Flex-Container). */
  flex-direction: row;
  margin: 0;
  /* New */
  padding: 0;
  /* New */
  list-style: none;
  /* New */
  font-size: 0.9rem;
}

.barChart_h tbody ol.y-axis-labels li.zero {
  position: absolute;
  /* Remove 0 from Flexbox flow. */
  /* New */
  left: 0;
  right: auto;
  bottom: auto;
  top: 0;
}

.barChart_h tbody ol.y-axis-labels li.zero b {
  transform: translate(-50%, 0%);
}

.barChart_h tbody ol.y-axis-labels li {
  flex: 1 0 0;
  text-align: right;
}

.barChart_h tbody ol.y-axis-labels li b {
  display: inline-flex;
  transform: translate(50%, 0%);
  font-weight: normal;
}

/**************************************************************************/
/* MOBILE                                                                 */
/**************************************************************************/
@media screen and (max-width: 414px) {
  body {
    font-size: 0.8em;
  }

  /* CAPTION */
  .barChart_h caption {
    font-size: 1rem;
  }

  /* FIGURE */
  .figure {
    margin: 0;
    padding: 1rem;
  }

  /* TD */
  .barChart_h tbody td {
    width: 60%;
  }
}