`box-shadow` doesn't work in Chrome in combination with `border-collapse` and `position: relative`

Question

I have a <table> with data. For style reasons, it has border-collapse.

In that table, the <td> elements have position: relative because I want them to have a tooltip (which I achieve via a child <div> with position: absolute).

In Chrome, box-shadow for the <td> doesn't work unless I delete border-collapse or position: relative (which I don't want to delete because I need them for the aforementioned reasons). How can I fix that? It works fine in Firefox.

Here's a small example:

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
}

<table>
  <tr>
    <td>This has a shadow in Firefox but not in Chrome</td>
  </tr>
</table>

For people who question position: relative, here's a longer example where removing position: relative breaks the desired functionality of the tooltip:

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
  border: 1px solid black;
}

div {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0; /* -1px looks inconsistent across columns :( */
  top: 100%; /* pixel-perfect */
  padding: 5px;
  border: 1px solid black;
}

td:hover>div {
  visibility: visible;
}

<table>
  <tr>
    <td>Hover your mouse cursor here
      <div>tooltip</div>
    </td>
  </tr>
  <tr>
    <td>Shadow is missing in Chrome</td>
  </tr>
</table>