如何使用ngtable获得固定的列宽?

时间:2015-08-04 04:48:41

标签: angularjs ngtable

我正在考虑ngtable。只有一个问题,我怎样才能使列固定宽度?在此示例中,帐户和顾问列在转到下一页时具有可变宽度。 这是html:

<table ng-table="tableParams" template-pagination="custom/pager" class="table">
      <tr ng-repeat="account in $data | filter:accountName | filter:key" class="orders tablerow">
            <td data-title="'ID'" sortable="'account.accountId.key'">
                  {{account.account.accountId.key}}
            </td>
            <td data-title="'Account'" sortable="'account.accountName'">
                  {{account.account.accountName}}
            </td>
            <td data-title="'Adviser'" sortable="'account.adviser.key'">
                  {{account.account.adviser.key}}
            </td>
            <td data-title="'Product'" sortable="'account.productName'">
                  {{account.account.productName}}
            </td>
            <td data-title="'Status'" sortable="'minOpenOrderState'">
                  {{account.minOpenOrderState}}
            </td>
      </tr>
</table>

Plunkr:http://plnkr.co/edit/vPQeVx?p=info

2 个答案:

答案 0 :(得分:3)

只需为&#34; td&#34;

添加css
td{
     width:20%;
     float:left;
     word-wrap:break-word;
}

答案 1 :(得分:2)

接受的答案是完美的,但它不包括大多数列宽无关紧要的情况,但1-2列应该有固定的宽度(或至少不被挤压)

一种解决方法是通过定义固定宽度的内容来强制列的宽度。像这样:

 <td title="'TheTitle'" sortable="'PassedStr'"> 
      <div style="width:120px"> 
           <b>{{item.SomeCol}}</b> 
           <span ng-show="item.ErrorMessage"> 
              {{item.OtherCol}}
           </span> 
       </div>  
  </td>