Hinzufügen einer Bildlaufleiste zu einer Tabelle mit festen Headern

Question

Ich bin neu in der Web-Entwicklung. Ich habe eine Tabelle, die wie folgt aussieht:

sr.No Name Score Action 
1  ABC 5  Add 
2  PQR 7  Remove 

HTML unter:

<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">Name</th> 
        <th class="text-center">Score</th> 
        <th class="text-center">Actions</th> 
       </thead> 
       <tbody> 
       <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> 
</tbody> 
      </table> 
     </div> 
    </div> 

ich durch jede Lösung gegangen sind, aber ich habe keine Antwort für diese finden. Ich möchte eine Bildlaufleiste für diese Tabelle haben und die Header sollten behoben werden.

Kann mir bitte jemand dabei helfen?

Ich habe dies versucht ->

table ,tr td{ 
    border:1px solid red 
} 
tbody { 
    display:block; 
    height:200px; 
    overflow:auto; 
} 
thead, tbody tr { 
    display:table; 
    width:100%; 
    table-layout:fixed;/* even columns width , fix width of table too*/ 
} 
thead { 
    width: calc(100% - 1em)/* scrollbar is average 1em/16px width, remove it from thead width */ 
} 
table { 
    width:400px; 
} 

Dies führt zu -

Plunker für diese ->

Plunker

Answer 1

Ich glaube, Sie sind für diese suchen?

 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; 
 
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th>Make</th> 
 
     <th>Model</th> 
 
     <th>Color</th> 
 
     <th>Year</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
      <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    </tbody> 
 
    
 
</table>

Answer 2

Während Bootstrap verwenden, können Sie die table-fixed CSS-Klasse verwenden Header zu beheben:

<table class="table-fixed"> ... </table/> 

Dann, wenn Sie die Tabelle scrollbaren machen wollen, ist es eine große Sache und es gibt mehrere Lösungen. Hier ist ein Vorschlag:

tr { 
 
    width: 100%; 
 
    display: inline-table; 
 
    table-layout: fixed; 
 
} 
 

 
tbody { 
 
    overflow-y: scroll; 
 
    height: 100px; 
 
    width: 100%; 
 
    position: absolute; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <table class="table table-fixed"> 
 
      <thead> 
 
       <th class="col-xs-2">#</th> 
 
       <th class="col-xs-8">Name</th> 
 
       <th class="col-xs-2">Points</th> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>