>>>>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 ?
>
>This is part of the directive and this is how it's defined
>
>
><tr style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'>
> <th ng-repeat="column in table.columns" ng-click="sort(column)">
> <span ng-if="column.displayName == undefined || column.displayName == ''">{{column.name}}</span>
> <span ng-if="column.displayName != undefined && column.displayName != ''">{{column.displayName}}</span>
> <span class="pull-right" href="#" ng-show="column.name === table.sort">
> <i ng-class="{'icon-chevron-down': table.dir === 'asc', 'icon-chevron-up': table.dir === 'desc'}"></i>
> </span>
> </th>
></tr>>
>So, I can not change the header as it's generated on the fly. I can only operate with the table's body.
>
>Here is my current code
>
>
><tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
> <td class="col-md-3">
> <input type="checkbox" ng-model="result.isToBePaid"
> data-no:dirty-check
> ng-change="payChange(result)" />
> </td>
> <td class="col-md-3">
> <a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>
> </td>
> <td class="col-md-5">
> {{result.descrip}}
> </td>
> <td class="col-md-12 col-lg-12">
> {{result.dateCreated |date: 'medium'}}
> </td>
> <td class="col-md-4">
> <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
> </td>
> <td class="col-md-4">
> <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>>
>So, I somehow need to figure out the percentages if I want to use these classes. I am going to try right now the width %.
Permitted content for a th element is 'Zero or more td elements' - why are you using 'span' ?
The bootsrap grid has 12 columns - why do you have 25. (Did you actually read what I posted previously ?)
IAC you could consider adding a 'width' or 'style' element to your column object when building the header....
