如何使用 ngtable 获得固定的列宽?
How to get a fixed columnwidth with 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>
只需为 "td"
添加 css
td{
width:20%;
float:left;
word-wrap:break-word;
}
接受的答案是完美的,但它不包括大多数列宽度无关紧要,但 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>
我正在思考 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>
只需为 "td"
添加 csstd{
width:20%;
float:left;
word-wrap:break-word;
}
接受的答案是完美的,但它不包括大多数列宽度无关紧要,但 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>