2
Web開発が初めてです。私はすべてのソリューションを介して行っているが、私はこれのためにどんな答えを見つけられませんでした固定ヘッダー付きの表にスクロールバーを追加する
<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>
：以下
sr.No Name Score Action
1 ABC 5 Add
2 PQR 7 Remove
HTML：私はのように見えるテーブルを持っています。 私はこのテーブルのスクロールバーを持っているし、ヘッダーを修正する必要があります。
どれでもお手伝いできますか？
は、私はこれを試してみました - >
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;
}
これはに結果 - このため
Plunker - >
は、次の2つの異なる部分にヘッダとコンテンツを作ることができますか？ –
@ganeshk [This]（https://stackoverflow.com/a/23989771/6712896）は役に立ちませんか？ – JeanJacques
@JeanJacquesちょっと、データはドキュメントの列にあるファイルの名前と同じで、srは同じアクションです。いくつかのボタンがあり、スコアも数字です – ganeshk