CSS - данные таблицы не попадают под фиксированный заголовок таблицы - Overflow-X

Question

В фиксированном заголовке таблицы мне нужно, чтобы весь текст помещался под фиксированным заголовком, чтобы фиксированный заголовок не смещался.Это работает для всего во второй таблице.Однако все содержимое 2-й таблицы находится в пределах 98% ширины.

В 1-й таблице у меня есть тег TD, где пробел: nowrap хранит все содержимое в 1 строке, поэтому, когда происходит переполнение-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"исправит таблицу при изменении размера области просмотра.

fiddle

Answer 2

Ну, решение вашей конкретной проблемы довольно простое;однако в вашем коде могут быть значительные улучшения, например, вместо клонирования всего table и удаления tbody и т. д., но я думаю, это выходит за рамки этого вопроса.

Просто добавьтеэти несколько строк CSS:

.blue.fixed {
  width:100%;
  table-layout:fixed;
}

https://jsfiddle.net/1Ljuycbe/84/