応答テーブルのヘッダを修正してください。

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

はフィドルであなたが見るこの1

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