to fill in table with text overlaid

Question

I want a table with feint bars in one column sized width-wise to represent a value. The bars must be overlaid with clickable links. I'm struggling to get the bars to fill the height of their parent <td> elements and effectively sit underneath the <a> elements. This is the best I've got to:

tr {
  height: 100%;
}
.bar {
  position: relative;
  top: 0px;
  height: 100%;
  z-index: 10;
  background-color: #ff000030;
}

.link {
  position: relative;
  top: 0px;
  z-index: 20;
}

<table width="600px" style="background-color: #eee;">
  <tr>
    <th>Value</th>
    <th width="100%">Name and bar</th>
  </tr>
  <tr>
    <td>20</td>
    <td>
      <div width="50%" class="bar"></div>
      <a class="link" href="#">twenty</a>
    </td>
  </tr>
  <tr>
    <td>40</td>
    <td>
      <div width="100%" class="bar"></div>
      <a class="link" href="#">forty</a>
    </td>
  </tr>
  <tr>
    <td>10</td>
    <td>
      <div width="25%" class="bar"></div>
      <a class="link" href="#">ten</a>
    </td>
  </tr>
</table>

Bars are not currently visible. Grateful for assistance.

@temani-afif That page does not look like a duplicate to me. That question (1) is about percentage height of page not td so **..vh is not a solution for me**, and (2) does not feature a clickable overlaid element. Please re-open this. — geotheory, Jan 18 '20 at 11:32
You need to use position absolute (you find this in the duplicate) and percentage height is not only related to the page height. The same issue happen anywhere when you don't understand how percentage height works — Temani Afif, Jan 18 '20 at 13:34
They're not duplicates. 31728022 is another vh solution. 28486685 sets row height to 100%, which I already have done. 31306858's `position: fixed` suggestion results in visible bars but tags are pushed down. So thanks for your suggestions but I'm no closer to solving the problem. It seems creating a minimised reproducible version of a problem is not sufficient when there is a Duplicate Zealot in town. — geotheory, Jan 18 '20 at 23:58

to fill in table with text overlaid

0 Answers0