I tried explicit numbers, but the appearance remained the same :( Something is amiss here
<table id="payInvoicesTable" ng-show="payInvoices" class="table table-bordered table-hover table-list">
<thead data-search:table-header data-table="payInvoicesTable" data-search="search()">
</thead>
<tbody>
<tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
<td style="width:10%;">
<input type="checkbox" ng-model="result.isToBePaid"
data-no:dirty-check
ng-change="payChange(result)" />
</td>
<td style="width:12%;">
<a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>
</td>
<td style="width:18%;">
{{result.descrip}}
</td>
<td style="width:30%;">
{{result.dateCreated |date: 'medium'}}
</td>
<td style="width:14%;">
<span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
</td>
<td style="width:16%;">
<input type="number" name="payment" ng-model="result.payment" id="payment"
ng-disabled="!result.isToBePaid"
ng-class="{'negative-amount' : result.payment < 0}"
min="0"
data-no:dirty-check
data-sm:number placeholder=" 000.00"
data-sm:number-format data-accuracy="2" />
<div class="field-validation-error">
<span ng-show="payInvoicesRow.payment.$error.min">Payment should not be negative.</span>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td>@String.Format(Labels.totalX, ":")</td>
<td><span ng-class=" {'negative-amount': total('invoiceBalance') < 0}">{{total('invoiceBalance')|currency}}</span></td>
<td>{{total('payment')|currency}}</td>
</tr>
</tfoot>
</table>>>>Obviously your percentages don't add up......
>>
>>Hi Viv,
>>
>>I was actually thinking of trying to use width in % explicitly. Do you think it will be a good thing to try?
>>
>>Thanks again for your help.
>
>If the bootstrap 12 column layout can give you acceptable percentages you might as well use the 'col-xx-x' classes - easier to understand.
>
>Also you only need to set those classes on the td values for one row. e.g:
<!DOCTYPE html>
><html xmlns="http://www.w3.org/1999/xhtml">
><head>
> <title></title>
></head>
><body>
> <link href="Content/bootstrap.css" rel="stylesheet" />
> <div>
> <div class="col-md-2">
> </div>
> <div class="col-md-6">
> <table class="table table-bordered table-striped">
> <caption>Test</caption>
> <thead>
> <tr>
> <td class="col-md-2"> Column 1</td>
> <td class="col-md-3">Column 3</td>
> <td class="col-md-7">Column 3</td>
> </tr>
> </thead>
> <tr>
> <td>This is Cell 1</td>
> <td>Cell 2</td>
> <td>Cell 3</td>
> </tr>
> <tr>
> <td>This is Cell 1</td>
> <td>Here is a very long cell indeed</td>
> <td>Cell 3</td>
> </tr>
> <tfoot><tr><td colspan="3">This is at the bottom</td></tr></tfoot>
> </table>
> </div>
> </div>
></body>
></html>
In your case you seem to be generating the header from a lookup. In that case you could probably define the col-xx-x classes there ?
If it's not broken, fix it until it is.
My Blog 
