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

我正在使用angular-scrollable-table，因为它具有固定的标题。我需要表格以全视图水平移动，列标题为水平。我尝试过更改CSS，但无法正常工作。
朋克
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>

最佳答案

您必须进行两项更改。首先将所有内容嵌入div中每个th / td内，然后使用CSS设置th / td以及其中的div的宽度。在我的示例中，我将它们全部设置为200px，但是您应该使用css类将它们设置为实际需要的任何东西。

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

此更新的plnkr可以工作，并且包括修改后的角度可滚动表。请参阅angular-scrollable-table.min.js，html和css中的更改（注意min.js不再是min了）。

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