Display inline - overflow visible opacity - html

Question

I have a table which should not have multi-lines. So I was thinking of forcing the overflow being hidden and make overflow visible it on hover. However, the other text is still shining through the visible overflow. Is there a way to prevent this?
https://jsfiddle.net/60mj7gqb/1/
<table>
<tr>
<td style="height: 30px; width: 100px; border: 1px solid grey;">
<div style="width: 100px; overflow: hidden">
<span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
</div>
</td>
<td style="height: 30px; width: 100px; border: 1px solid grey;">
<div style="width: 100px; overflow: visible">
<span style="white-space: nowrap; padding: 5px; background: #afffcf">myPreciousText is located here</span>
</div>
</td>
<td style="height: 30px; width: 100px; border: 1px solid grey;">
<div style="width: 100px; overflow: hidden">
<span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
</div>
</td>
</tr>
</table>

Answer 1

You could add a z-index on hover (as well as your background-colour on the span):
div {
overflow: hidden;
}
div:hover {
position: relative;
z-index: 1;
overflow: visible;
}
div:hover span {
background: #afffcf;
}
<table>
<tr>
<td style="height: 30px; width: 100px; border: 1px solid grey;">
<div style="width: 100px; ">
<span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
</div>
</td>
<td style="height: 30px; width: 100px; border: 1px solid grey;">
<div style="width: 100px; ">
<span style="white-space: nowrap; padding: 5px; ">myPreciousText is located here</span>
</div>
</td>
<td style="height: 30px; width: 100px; border: 1px solid grey;">
<div style="width: 100px;">
<span style="white-space: nowrap; padding: 5px;">myPreciousText is located here</span>
</div>
</td>
</tr>
</table>