修復標題在響應表中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