Width-change of <div> inside <td> changes <td>-width

I do have a table where I want to show the complete cell-content on hover.

I got this working with css, but now I'm facing a bug with all browsers except Chrome.

HTML extract:

<table><tr>
  <td class="hover-text" style="width: 99px">
    <div style="width: 99px">A long text</div>
  </td>
</tr></table>

CSS extract:

.hover-text div{
  text-overflow: ellipsis;
}
.hover-text:hover div{
  overflow: visible;
  z-index: 1;
  width: auto !important;
  position: absolute;
}

This works all fine, except if I use any browser but Chrome, there is just one row and there is a horizontal scroll-bar. Then the cells are strangely resized. Without one of this conditions, I got no problems. Unfortunately the HTML is given from the framework I use.

I tried all sort of things, but at this point I'm at a loss..

You can see this issue here if you resize the table so that there is no horizontal scroll-bar, everything works as expected.