修复标题在响应表中angularjs

Question

我是webDevelopment.的新手在发布之前，我已经经历了所有的答案，但是他们都没有为我工作。所以，我在问这个问题。我有一张桌子，我添加了

overflow-y:scroll; 
height:100px; 

使用此我正在滚动条，但我的表头不固定。所以，任何人都可以帮助我呢？

<div class="col-xs-12 col-md-12 nopadding"> 
    <div class="table-responsive"> 
     <table class="table table-striped table-bordered col-xs-12 col-lg-12"> 
      <thead class="text-center text-info text-capitalize"> 
      <th class="text-center">Sr.No.</th> 
      <th class="text-center">Document</th> 
      <th class="text-center">Score</th> 
      <th class="text-center">Actions</th> 
      </thead> 
      <tr ng-repeat="file in processResumeFiles"> 
       <td class="text-center">{{ file.id}}</td> 
       <td class="view-orphan uploadResumeTableCellOverFlow"> 
        {{ file.attributes.name}} 
       </td> 
       <td class="text-center">{{file.totalScore}}</td> 
       <td class="text-center"> 
        <button class="btn btn-labeled btn-info" title="click to see" ng-disabled="!file.attributes.isUploadedDocument" data-ng-click="somemethod($index)"> 
         <i class="fa fa-eye" aria-hidden="true"></i> 
        </button> 
        <button class="btn btn-labeled btn-info" title="click to see" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)"> 
         <i class="fa fa-share" aria-hidden="true"></i> 
        </button> 
        <button class="btn btn-labeled btn-info" title="click to see" data-ng-click="somemethod(file.attributes.name)"> 
         <i class="fa fa-trash" aria-hidden="true"></i> 
        </button> 
        <button class="btn btn-labeled btn-info" title="click to see" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)"> 
         <i class="fa fa-sign-out" aria-hidden="true"></i> 
        </button> 
        <button class="btn btn-labeled btn-info" title="click to see" ng-disabled="!file.attributes.isCommitted || !isjdDeleted || !jdSelected" 
          data-ng-click="somemethod(file.attributes.name)"> 
         <i class="fa fa-check-square" aria-hidden="true"></i> 
        </button> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

这里有一个jQuery插件，没有工作适合你：fixed header table

Answer 2

你可以试试这个：

.table-fixed thead { 
    width: 97%; 
} 
.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
    width: 100%; 
} 
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { 
    display: block; 
} 
.table-fixed tbody td, .table-fixed thead > tr> th { 
    float: left; 
    border-bottom-width: 0; 
} 

Answer 3

试试这个

table { 
    width: 100%; 
} 

thead, tbody, tr, td, th { display: block; } 

tr:after { 
    content: ' '; 
    display: block; 
    visibility: hidden; 
    clear: both; 
} 

thead th { 
    height: 30px; 
    text-align: left; 
} 

tbody { 
    height: 120px; 
    overflow-y: auto; 
} 

thead { 
    /* fallback */ 
} 


tbody td, thead th { 
    width: 19.2%; 
    float: left; 
} 

您在小提琴看https://jsfiddle.net/zLgzwn56/

Answer 4

首先将您的表格元素添加：。

同样为了语义上的正确，为表格上的内容添加tbody（在你的例子中缺少）。

然后将overflow: auto;和高度添加到tbody。看例子：https://codepen.io/tjvantoll/pen/JEKIu