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

Question

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

Answer 1

您必须进行两项更改。首先将每个 th/td 中的所有内容嵌入到一个 div 中，然后使用 css 设置 th/ 的宽度td 以及里面的div。在我的示例中，我将它们全部设置为 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