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

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

В 1-й таблице у меня есть тэг TD, где white-space: 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;
 }

Ответ 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" зафиксирует таблицу при изменении размера окна просмотра.

играть на скрипке

Ответ 2

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

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

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

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