CSS rollover does not work on scope in table

After it did work at first, I (apparently) changed something in my CSS. After hours of research I still can't figure out why the content of my <span> now won't be displayed on hover anymore...
Can anyone help me, please? Thank you!

This is a snippet of my CSS:

td.matchbool {
  text-align: center;
  box-shadow: inset 0px 0px 0px 10px #fff;
}
td.matchbool:hover{
  background:#e2e236;
  width:400px;
}

td.matchbool span{
  display: none;
}

td.matchbool:hover span{
  z-index: 9999;
  width: 300px;
  border-left: 5px solid #e2e236;
  display: block;
  padding: 1px;
}

And the important HTML part:

<table><tr>
  <td class='matchbool'>
    <span>
      Some Content
    </span>
  </td>
</tr></table>

Note that on hover the background of the <td> does change.

You are hiding the only element in the single row, single column table.

This makes the HTML collapse to save space for other controls in the page.

That does not mean that hover function is gone. It just means that the space taken up by the span will not be "reserved" as if it is invisible.

To make it more simple: if you want the cell to take the same space as it should when hovering over it, then I suggest you re-write your CSS to preserve the size of the cell, even if its content is not visible.

One way to do so is to make the font color white, but that is a lousy way.

I have included a snippet code to convince you that the cell is there, and hover works but you need to know where to point your mouse pointer. For that, I have added extra padding to the td and made it with a border so you know where to put the cursor. once your mouse is inside the border, the hover functionality will kick in and you will see the span

td.matchbool {
  text-align: center;
  box-shadow: inset 0px 0px 0px 10px #fff;
  padding: 10px;
  border: 1px dashed grey;
}
td.matchbool:hover {
  background: #e2e236;
  width: 400px;
}
td.matchbool span {
  display: none;
}
td.matchbool:hover span {
  z-index: 9999;
  width: 300px;
  border-left: 5px solid #e2e236;
  display: block;
  padding: 1px;
}

<table>
  <tr>
    <td class='matchbool'>
      <span>Some Content</span>
    </td>

  </tr>
</table>