When it comes to the Table Fixed Header, my main concern is having all text properly aligned under the fixed header without any misalignment issues. The setup works perfectly for everything within the second table as it stays within 98% of the width.
The problem arises with the first table where I have a TD tag that utilizes white-space:nowrap to keep the content on one line. However, when an overflow-x occurs, this causes the fixed header to become misaligned. I am looking for a solution to ensure that the fixed header matches the rest of the table header and remains properly aligned.
The key challenge is making sure that the fixed header does not get jumbled up when Overflow-X: Auto happens and horizontal scrolling is required. It's important to note that adjusting your viewpoint may be necessary to observe this issue.
I suspect that the solution lies in tweaking the CSS or JQUERY code, but I'm struggling to pinpoint the exact adjustment needed...
If you want to explore the issue further, check out the JSFIDDLE link here: https://jsfiddle.net/rbla/1Ljuycbe/61/
.up:hover {
cursor:pointer;
}
.tooltip2 {
position: relative;
display: inline-block;
border-bottom: 3px dotted black; /* If you want dots under the hoverable text */
text-decoration: none;
color: #00F;
}
img.cadre {
border: 3px solid #D2D1D1;
border-radius: 4px;
width: 125px;
height: 125px;
}
.tooltip2 .tooltiptext2 {
visibility: hidden;
width: 130px;
background-color: #fff;
color: #fff;
text-align: center;
padding: 5px 5px;
border-radius: 6px;
margin-left: 7px;
position: absolute;
z-index: 0;
}
.tooltip2:hover .tooltiptext2 {
visibility: visible;
cursor:pointer;
}
.tooltip2 .tooltiptext2 {
top: -5px;
left: 105%;
}
/* Left Arrow */
.tooltip2 .tooltiptext2::after {
content: " ";
position: absolute;
top: 15px;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent white transparent transparent;
}
table.blue.fixed {
z-index: 99;
}