CODEWITHSUNDEEP
angularjsngtable
Leeuwtje
Leeuwtje

Reputation: 2261

How to get a fixed columnwidth with ngtable?

I am getting my head around the ngtable. Just one question, how can I make the columns fixed width? In this sample the account and adviser column have variable width when going to the next page. This is the 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

Upvotes: 4

Views: 16796

Answers (2)

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23078

Accepted answer is working perfectly, but it does not cover the case when most of the columns width does not matter, but 1-2 columns should have a fixed width (or at least not be squeezed)

One work-around is to force the width of a column by defining a fixed-width content. Something like this:

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

Upvotes: 3

Abhishek
Abhishek

Reputation: 54

just add css for "td"

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

Upvotes: 3

Related Questions