如何使用角度可滚动表来更改列的宽度

问题描述：

我正在使用角度可滚动表，因为它具有固定标题。我需要桌面在全视图中与列标题一起水平流动。我试图改变CSS，但我无法得到它的工作。 plunkr plunkr 如何使用角度可滚动表来更改列的宽度

<scrollable-table watch="jobArray"> 
<div class="table-responsive" > 
<table class=" table table-bordred table-striped table-hover"> 
    <tr> 
    <th style="font-weight: bold;">Job Number</th> 
    <th style="font-weight: bold;">Name</th> 
    <th style="font-weight: bold;">Customer</th> 
    <th style="font-weight: bold;">PM</th> 
    <th style="font-weight: bold;">Superintendent</th> 
    <th style="font-weight: bold;">Tax Exempt</th> 
    <th style="font-weight: bold;">Cert Payroll</th> 
    <th style="font-weight: bold;">Status</th> 
    <th style="font-weight: bold;">Contract</th> 
    <th style="font-weight: bold;">Total CO</th> 
    <th style="font-weight: bold;">Revised Contract</th> 
    <th style="font-weight: bold;">Job Cost</th> 
    <th style="font-weight: bold;">Budget</th> 
    <th style="font-weight: bold;">Remaining Budget</th> 
    <th style="font-weight: bold;">Profit</th> 
    <th style="font-weight: bold;">%</th> 
    <th style="font-weight: bold;">Total Billed</th> 
    <th style="font-weight: bold;">Balance To Bill</th> 
    <th style="font-weight: bold;">Paid to Date</th> 
    <th style="font-weight: bold;">Balance Due</th> 
    <th style="font-weight: bold;">Contract Date</th> 


    </tr> 
    <tbody> 
    <tr ng-repeat="job in jobArray" class="pointer"> 
     <td ng-click="editJobModal(job)">{{job.JobNumber}}</td> 
     <td>{{job.JobName}}</td> 
     <td>{{job.Customers[0].CustomerName}}</td> 
     <td>{{job.TESPM}}</td> 
     <td>{{job.TESSuperintendent}}</td> 
     <td>{{job.TaxExempt}}</td> 
     <td>{{job.CertPayroll}}</td> 
     <td>{{job.Status}}</td> 
     <td>${{job.OriginalContract | number : fractionSize}}</td> 
     <td>${{job.TotalCO | number : fractionSize}}</td> 
     <td>${{job.RevisedContract | number : fractionSize}}</td> 
     <td>${{job.JobCost | number : fractionSize}}</td> 
     <td>${{job.Budget | number : fractionSize}}</td> 
     <td>${{job.RemainingBudget | number : fractionSize}}</td> 
     <td>${{job.Profit | number : fractionSize}}</td> 
     <td>{{job.Percentage}}%</td> 
     <td>${{job.TotalBilled | number : fractionSize}}</td> 
     <td>${{job.BalanceToBill | number : fractionSize}}</td> 
     <td>${{job.PaidToDate | number : fractionSize}}</td> 
     <td>${{job.BalanceDue | number : fractionSize}}</td> 
     <td>{{job.ContractDate | date : date : shortDate}}</td> 


    </tr> 
    </tbody> 
</table> 
</div> 
</scrollable-table>

答

你必须做出两处修改。首先将每个th/td中的所有内容嵌入div中，然后使用css设置其中的th/td以及div的宽度。在我的例子中，我将它们全部设置为200px，但是您应该使用css类来设置它们以满足您真正需要的。

然后，您需要修改角度可滚动表以删除它与列大小调整相关的所有内容。基本上搜索宽度并删除所有内容。

此更新的plnkr的作品，并包括修改后的角度可滚动表。查看angular-scrollable-table.min.js，html和css中的更改（注意min.js不再是min）。

http://plnkr.co/edit/2iGEEGqoMB6aFnsQgsUz?p=preview

现在的问题是固定的标题和排序。他们不再工作？ – texas697 2014-09-03 17:05:03

@ user3919120，是的，当你删除代码时会发生这种情况;）它仍然是可滚动的。如果您想保留其他功能，您需要深入了解可滚动列表的工作方式，以便根据我的建议改变它。对不起，我无法提供更多帮助。 – 2014-09-03 18:52:57

我得到它的工作，感谢您的帮助 – texas697 2014-09-03 19:41:12

如何使用角度可滚动表来更改列的宽度

相关推荐