CSS - 表数据不在固定表头下 - Overflow-X

Question

在Table Fixed Header中,我需要将所有文本放在固定标题下,并且固定标题不要错位.这适用于第二个表中的所有内容.但是,第二个表中的所有内容都在98%宽度内.

在第一个表中,我有一个TD标签,其中white-space:nowrap将所有内容保存在1行,因此当overflow-x发生时,固定标头变得不对齐.如何修复此固定标头以匹配表头并且不会错位？

所以当Overflow-X:Auto发生时我需要这个.我想要水平滚动,这样很好,但它是固定的标头,混乱.

您可能必须更改视点的大小才能看到这种情况

我相信它可能在CSS或JQUERY中我需要进行调整但无法弄清楚如何调整....

JSFIDDLE 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;
 }

Answer 1

$t_fixed.css("width",$this.outerWidth()+"px");
$this.parent().on( 'scroll', function(){
  $t_fixed.css("left",(($this.parent().scrollLeft())*-1)+"px");
});
$( window ).resize(function() {
    $t_fixed.css("width",$this.outerWidth()+"px");
});

要使这项工作正常进行，您需要更改三件事。

1) 桌子的宽度必须与原始桌子的宽度相匹配。第一行代码固定列位置。

2) 当您滚动表格时，除非您随着滚动移动克隆的标题行，否则列将不匹配。

3）“.resize”将在调整视口大小时修复表格。

小提琴