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

在表格固定标题中,我需要所有文本都放在固定标题下,并且固定标题不要对齐。这适用于第二个表中的所有内容。但是,第二个表中的所有内容都在98%的宽度内。

在第一个表中,我有一个TD标记,其中white-space:nowrap将所有内容保留在1行上,因此,当发生溢出x时,固定 header 将变得未对齐。如何修复此固定的 header 以匹配表 header 并且不会错位?

因此,当发生Overflow-X:自动时,我需要它来工作。我想要水平滚动,这样很好,但是固定的 header 变得困惑。

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

我相信可能是我需要进行调整的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;
 }

最佳答案

$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)调整视口(viewport)大小时,“。resize”将修复表格。

fiddle