修复响应表 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

首先将：table-layout: fixed; 添加到您的表格元素中。

同样为了语义正确，为表格上的内容添加 tbody（在您的示例中缺少）。

然后给 tbody 添加overflow: auto; 和一个高度。参见示例：https://codepen.io/tjvantoll/pen/JEKIu