CSS - 表格数据不在固定表格标题下 - 溢出-X答案

【问题标题】：CSS - table data not going under fixed table header - Overflow-XCSS - 表格数据不在固定表格标题下 - 溢出-X
【发布时间】：2019-03-03 17:28:10
【问题描述】：

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

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

所以当 Overflow-X: Auto 发生时我需要它来工作。我想要水平滚动，这样就可以了，但是固定的标题会变得混乱。

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

我认为可能是在 CSS 或 JQUERY 中我需要进行调整但不知道如何调整....

JSFIDDLEhttps://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;
 }

【问题讨论】：

表格不遵循所有正常的 CSS 规则。
也许只使用一个普通的表格，位置：sticky on th，根本不用javascript？

标签： html css

【解决方案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

【讨论】：

我想知道左侧定位发生了什么 ---> - 10)*-1)+"px");
桌子上有滚动条。因此，当表格向左和向右滚动时，浮动标题会随之移动。 -10 是边距或填充，负 1 将浮动标题向左移动，与向右滚动的滚动相反。
似乎是一个很好的答案。我想知道为什么它没有被接受？
@Vlad - 在我的示例中，-10 使浮动标题偏离标记 - 我正在使用它 - $t_fixed.css("left",(($this.parent().scrollLeft ())*-1)+"px"); - 对我来说很关键的一件事是添加这个 CSS box-sizing:border-box;到 TH 和 TD 元素。
@Ronald - 添加了一个“resize”监听器来调整表头。

【解决方案2】：

嗯，您的具体问题的解决方案相当简单；但是，可以对您的代码进行大量改进，例如，而不是克隆整个 table 并删除 tbody 等，但我想这超出了这个问题的范围。

只需添加这几行 CSS：

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

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

【讨论】：