Question

我正在使用angular-scrollable-table，因为它有固定标头。我需要表格在全视图中与列标题水平流动。我试过改变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>

Answer 1

您必须进行两项更改。首先在div中嵌入每个th / td内的所有内容，然后使用css设置th / td以及{{1}的宽度}} 在里面。在我的例子中，我将它们全部设置为200px，但你应该使用css类来设置它们，无论你真正需要什么。

然后，您需要修改angular-scrollable-table以删除与列大小调整相关的所有内容。基本上搜索宽度并删除所有内容。

此更新的plnkr工作并包含修改的angular-scrollable-table。请参阅angular-scrollable-table.min.js，html和css中的更改（注意min.js不再是min）。

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

如何使用angular-scrollable-table更改列的宽度

1 个答案: