Question

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

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

所以当Overflow-X：自动发生时，我需要它来工作。我想要水平滚动，这样很好，但固定的标题会变得混乱。

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

我认为可能是在CSS或JQUERY中需要进行调整，但无法弄清楚如何调整...。

JSFIDDLE https://jsfiddle.net/rbla/1Ljuycbe/61/

$scope.getAll = function() {

    $http.get('employees').then(function(response, status, header, config){
        $scope.employees = response.data;
    });
}

Answer 1

嗯，解决您的特定问题非常简单；但是，可以对您的代码进行大量改进，例如代替克隆整个table并删除tbody等，但是我想这不在此问题范围内。

只需添加以下几行css行：

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

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

Answer 2

$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

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

2 个答案: