javascript - 列标题与表中的数据未对齐

Question

我是 webDevelopment 和 Angular 的新手。我已经添加了表头修复功能。但正因为如此，标题与表中的数据不一致。

.tableBodyScroll tbody {
    display:block;
    max-height:300px;
    overflow-y:scroll;
    }
    .tableBodyScroll thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    }

<div class="col-xs-12 col-md-12 nopadding tableBodyScroll">
        <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>
                <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 move" 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 delete " data-ng-click="deleteResume(file.attributes.name)">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </button>
                            <button class="btn btn-labeled  btn-info" title="click to Move " 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 move " ng-disabled="!file.attributes.isCommitted || !isjdDeleted || !jdSelected" data-ng-click="moveToJobDescription(file.attributes.name)">
                                <i class="fa fa-check-square" aria-hidden="true"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

所以，现在我在这里使用这个 tableBodyScroll 然后它修复标题并添加滚动条，但给出了该错误。谁能帮我这个？按钮也不在一排。谁能帮我解决这个问题吗？

Answer 1

您应该使用标题如下的表格:

<table ng-table="vm.tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            {{user.name}}</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
            {{user.age}}</td>
    </tr>
</table>