A method I am using involves displaying additional data on hover for a shortened header, like this:
However, the text shifts across the page when the scrollbar is used, as shown here:
This table showcases HTML, CSS, and Javascript in action:
<th style="text-align:center;">
<div>
NYITKG3
</div>
<div class="popup" >
Joyride Green Tea RTD Keg
</div>
</th>
$(".cell").mouseover(function() {
$(this).children(".popup").show();
}).mouseout(function() {
$(this).children(".popup").hide();
});
.popup {
display:none;
position:absolute;
border:1px solid #000;
width:100px;
color: black;
background: white;
}