Bootstrap: .stretched-link behaviour on table rows

[six7]

Codepen here:
https://codepen.io/anon/pen/EJPQzL

Expected behaviour
Expected behaviour on using .stretched-link in a table would be that the whole row would get clickable by setting the <tr> to position-relative.

Actual output
Actual output shows that the pseudo element of the .stretched-link class gets 100% of the body height - effectively breaking hover.

A possible hacky workaround would be to place the link tag multiple times per table row and putting position-relative on each of the <td> items

[MartijnCuppens]

This is just not possible in CSS due to the specs https://www.w3.org/TR/CSS21/visuren.html#propdef-position:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

[mdo]

Perhaps we add a docs mention that links to that comment @MartijnCuppens?

[andrewgunn]

One way around this is to create a <div class="position-relative"> directly within each <td> and add the <a href="..." class="stretched-link"></a> along with any other content. You'll also need to remove the padding from each <td> with p-0 and add padding to the <div> with p-3.

Example:

<table class="table">
  <tbody>
    <tr>
      <td class="p-0">
        <div class="position-relative p-3">
          <a href="#" class="stretched-link"></a>
           Test
        </div>
      </td>
    </tr>
  </tbody>
</table>