hidden content in table header, display on hover - css

Question

I have a table with a lot of information in the header columns, and there are a lot of columns. I need the table width to fit into reasonable laptop widths such as 1280.
My original idea was to align the column content vertically, but that's not an option for several reasons.
So now the idea is to display only part of the content in the header, something along the lines of overflow:hidden, and show full content on hover, but without altering the width of the column.
This sample picture shows the column content how it looks like now - and how I need it to look like. The columns need to shrink to 50px, hiding text that did not fit, and show the rest of the text on hover, but without expanding the column width.
This is what I got so far:
https://jsfiddle.net/2em3c44q/
here, the column expands on hover. How do i expand only header without expanding the entire column?

Answer 1

On hover position the internal div absolutely, and it won't change the dimensions of the table column:
table {
width: 100%;
}
th,
td {
border-right: 1px solid grey;
}
.narrow {
position: relative; /* the context by which to position the inner div */
width: 50px;
}
.narrow div {
width: 50px;
overflow: hidden;
white-space: nowrap;
pointer-events: none; /* optional - enables hovering on other headers, when the current one is expanded */
}
.narrow:hover div { /* the hover is on narrow */
position: absolute;
top: 5px;
left: -75px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 200px;
background: white;
z-index: 1;
}
<table>
<thead>
<tr>
<th class="wide">
wide column
</th>
<th class="narrow">
<div>
column 1<br/> some info
</div>
</th>
<th class="narrow">
<div>
column 1<br/> some info
</div>
</th>
<th class="narrow">
<div>
column 1<br/> some info
</div>
</th>
<th class="narrow">
<div>
column 1<br/> some info
</div>
</th>
<th class="narrow">
<div>
column 1<br/> some info
</div>
</th>
<th class="narrow">
<div>
column 1<br/> some info
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
</tr>
</tbody>
</table>