html - CSS - 表格数据不在固定表格标题下 - Overflow-X

Question

在表格固定标题中，我需要所有文本都位于固定标题下，并且固定标题不会错位。这适用于第二个表中的所有内容。但是，第二个表中的所有内容都在 98% 的宽度范围内。

在第一个表中，我有一个 TD 标记，其中 white-space:nowrap 将所有内容保留在一行中，因此当发生 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

好吧，解决您的具体问题相当简单；但是，您的代码可以有很大的改进，例如，而不是克隆整个 table 并删除 tbody 等，但我想这超出了本文的范围问题。

只需添加以下几行 css:

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

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