How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

Question

I have a table with numerical data and I want to show a bar for every row. The challenge is to have grid lines like those found in Chrome dev tools:

You see those lines that say 400ms, 600ms, etc? That's what I'm after. One solution is to have multiple columns in the table but then how can the bar expand across multiple columns? Another solution is to use some sort of repeating background image that has those lines, but then it's tricky to adjust it for various designs (for example if the padding changes or if I want to change the grid color I have to redo the image, etc.)

I have come up with the code below but got stuck with the grid part. I want grid lines on 25%, 50%, 75% and 100%. Grids should be lines that go all over the bars all the way down to the bottom of the table.

table {
  background-color: gray;
}

td {
  width: 200px;
  background-color: lightgray;
}

.bar {
  background-color: red;
  height: 1em;
}

<table>
  <tr>
    <th>value</th>
    <th>25%| 50%| 75%| 100%|</th>
  </tr>
  <tr>
    <th>100</th>
    <td><div class="bar" style="width: 100%">.</div></td>
  </tr>
  <tr>
    <th>80</th>
    <td><div class="bar" style="width: 80%">.</div></td>
  </tr>
  <tr>
    <th>95</th>
    <td><div class="bar" style="width: 95%">.</div></td>
  </tr>
  <tr>
    <th>18</th>
    <td><div class="bar" style="width: 18%">.</div></td>
  </tr>
  <tr>
    <th>5</th>
    <td><div class="bar" style="width: 5%">.</div></td>
  </tr>
</table>

And this is the result I want:

Answer 1

table {
  width: 30%;
}

th, td {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 20%;
  text-align: center;
  font-weight: bold;
  padding: 0px;
}
th{
    background: #606060;
    border: none;
    border-right: 1px solid black;
}
td {
  vertical-align: top;
  z-index: -1;
}
.bar-row td {
  position: relative;
  height: 0px;
  font-size: 0px;
  border-width: 0px;
}

.bar {
  background: #f00;
  height: 15px;
  position: absolute;
  top: -17px;
}

     <table cellspacing="0">
  <tr>
    <th>value</th>
    <th>25%</th>
    <th>50%</th>
    <th>75%</th>
    <th>100%</th>
  </tr>
  <tr>
    <th rowspan="2">100</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar-row">
    <td colspan="4"><div style="width: 100%" class="bar"><div></td>
  </tr>
  <tr class="grey-bg">
    <th rowspan="2">80</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar-row">
    <td colspan="4"><div style="width: 80%" class="bar"><div></td>
  </tr>
  <tr>
    <th rowspan="2">95</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar-row">
    <td colspan="4"><div style="width: 95%" class="bar"><div></td>
  </tr>
  <tr class="grey-bg">
    <th rowspan="2">18</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar-row">
    <td colspan="4"><div style="width: 18%" class="bar"><div></td>
  </tr>
  <tr>
    <th rowspan="2">5</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar-row">
    <td colspan="4"><div style="width: 5%" class="bar"><div></td>
  </tr>
</table>