列标题与表中的数据不对齐

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>

Answer 2

据我所知。您的“文本中心”类未正确应用于 .我在你的 CSS 中添加了 text-center 类。数据现在已对齐。

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

<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>