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

你可以试试这个：

{{1}}

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（在示例中缺少该内容）。

然后将overflow: auto;和高度添加到tbody。请参阅示例：https://codepen.io/tjvantoll/pen/JEKIu

修复响应表angularjs中的标头

4 个答案: