如何冻结ngtable中的列并为表中的其余列创建滚动条?

时间:2017-01-15 06:22:47

标签: css angularjs ngtable

我的AngularJS应用程序中有一个数据表,其中有许多列,响应性不再起作用。我目前正在滚动整个数据表,这看起来并不好看。

我正在尝试找到一种方法来冻结数据表右侧的某些列,以便滚动仅适用于左侧的列。数据表包含右侧的按钮,因此如果按钮被冻结,则会更有帮助。

HTML:

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
 <div class="row">
        <div class="col-md-12">
            <div class="widget widget-table action-table" style="overflow:auto">
                <!-- /widget-header -->
                <div class="widget-content table-container" ng-controller="getTalentController">
                        <table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
                            <tr ng-repeat="talent in data">
                                <td data-title="'#'"  style="width:5px">{{ $index+1 }}</td>
                                <td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
                                    {{talent.employeeNo}}
                                </td>
                                <td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
                                    {{talent.fullName}}
                                </td>
 <td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
                                    {{talent.inDate}}
                                </td>
                                <td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
                                    {{talent.outTill}}
                                </td>
                                <td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
                                    {{talent.account}}
                                </td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
                                    <div style="border:solid">{{talent.state}}</div>

                                </td>
                                <td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
                                    <span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
                                    <span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
                                </td>
                                <td data-title="'Resume'">
                                    <a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
                                </td>
                                <td data-title="'Reserve'">
                                    <a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
                                </td>
                            </tr>
                        </table>
                    </div>
                <!-- /widget-content -->
            </div>
            <!-- /widget -->
        </div>
        <!-- /span12 -->
    </div>
    <!-- /row -->
</div>

我想冻结右侧带有标题&#39;州&#39;备注&#39;&#39;简历&#39;&#39;预留&#的列39;

我怎样才能做到这一点。我想这个问题不需要控制器代码。目前,我通过对外部div应用style="overflow:auto"来为表创建滚动条。

CSS:https://hastebin.com/wibahuyoxa.cs

0 个答案:

没有答案