>><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)" style="width: {{ column.width == undefined?100/table.columns.length:column.width }}%;"> >> {{column.displayName == undefined || column.displayName == ''?column.name:column.displayName}} >> <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>>>
<th ng-repeat="column in table.columns" ng-attr-style="width:{{(column.width === undefined) && 100/table.columns.length || column.width }}%"> > {{column.displayName===undefined ? column.name: column.displayName}} > </th>Looks like with the addition of the new width property and also getting rid of the one extra table (the edit form was in the table itself, not sure why) and making few other minor adjustments got me a much nicer appearance in Chrome. I haven't yet tested in other browsers but I like what I have now in Chrome and also an ease to programmatically control table's appearance using the ng-attr-style. Just wondering, is there a way to make it slightly different, e.g. if I specified width property, apply style, otherwise don't apply style at all? Right now I'm doing equal width (100/columns.count) if the width property is not supplied. I'd rather not apply style at all in this case.