<!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 ?
<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.
<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 %.