Change overflow:hidden in table to visible on hover - html

Question

I have the following HTML table:
table th {
border: 1px solid black;
z-index: 1;
}
.a {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
background: white;
}
.b {
white-space: nowrap;
}
.a:hover {
overflow: visible;
z-index: 2;
}
.c {
background: green;
}
<table>
<tr>
<th class=a><span class=c>a very long text that overflows</span></th>
<th class=b>some other text that is very long and should only be partly obscured</th>
</tr>
</table>
What I want to accomplish is that the text in field a ("a very long text that overflows") becomes visible on hover. The table structure should not change.
And indeed it becomes visible, but the text that should be behind it (from field b) partly obscures it. The added span and z-indexes have also no effect. (Tested in Firefox and Chrome)
What I would like is that the text in field a becomes visible and obscures as much of field b as necessary.
Also available in JSFiddle: https://jsfiddle.net/tdn15kh8/7/

Answer 1

Add position: relative; to th that contains overflowing text:
table th {
border: 1px solid black;
z-index: 1;
}
.a {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
background: white;
position: relative;
}
.b {
white-space: nowrap;
}
.a:hover {
overflow: visible;
z-index: 2;
}
.c {
background: lightgreen;
padding-right: .5rem;
}
<table>
<tr>
<th class=a><span class=c>a very long text that overflows</span></th>
<th class=b>some other text that is very long and should only be partly obscured</th>
</tr>
</table>
Check this MDN article to understand stacking context.

Answer 2

For z-index to work, it need a position aswell.
.a:hover {
overflow: visible;
position: relative;
z-index: 2;
}
Fiddle example here

Answer 3

Add position: relative to the .a. The z-index need position:relative or absolute.

Answer 4

There is also data attribute solution, that let you pass text from data attribute to ::after pseudo-class. It looks like this:
table{width: 300px;}
table th{border: 1px solid black;z-index: 1;}
.a{max-width: 100px;overflow: hidden;white-space: nowrap;background: white;}
.b{white-space: nowrap;}
.c{position: relative;}
.a:hover{overflow: visible;}
.a:hover .c::after{content:attr(data-text); display: block;position: absolute; top: 0; left: 0; background: green;}
<table>
<tr>
<th class="a">
<span class="c" data-text="a very long text that overflows">a very long text that overflows</span>
</th>
<th class="b">some other text</th>
</tr>
</table>