【发布时间】：2017-08-23 00:09:34
【问题描述】：
我是网络开发的新手。我有一张桌子，看起来像：
sr.No Name Score Action
1 ABC 5 Add
2 PQR 7 Remove
以下 HTML：
<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>
我已经完成了所有解决方案，但我没有找到任何答案。 我想要这个表格的滚动条，并且标题应该是固定的。
谁能帮帮我？
我试过了 -->
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 ->
【问题讨论】：
-
你能把标题和内容分成两个不同的部分吗？
-
@ganeshk This 没有帮助？
-
@JeanJacques 嘿，数据就像 Document 列中任何文件的名称，sr no 是相同的操作有一些按钮，分数也只是一个数字
-
@ganeshk 我不知道是什么但版主删除了我的答案））））这是我之前写的示例的链接）））mkoryak.github.io/floatThead
标签： javascript html css angularjs twitter-bootstrap-3