<th ng-repeat="col in wm.columns" ng-class="{selected: col.valueName === wm.selectedColumn}" class="ng-binding ng-scope selected" style=""> Extra Large </th>This element is supposed to show in blue color. It works correctly for me for the row attribute and for the selected value, but not for that header row.
<table id="matrixTable" class="table table-bordered table-hover table-list scTable"> <thead> <tr> <th class="col-xs-4" align="center" valign="middle"> <select class="form-control" ng-options="fld as fld for fld in wm.fieldValues" ng-model="wm.selectedField" ng-change="wm.fieldChanged(wm.selectedField)"></select> </th> <th class="col-xs-8" align="center" valign="middle"> <label class="control-label">{{wm.columnAttribute}}</label> </th> </tr> <tr> <th class="col-xs-4" align="center" valign="middle"> <label class="control-label">{{wm.rowAttribute}}</label> </th> <th ng-repeat="col in wm.columns" ng-class="{selected: col.valueName === wm.selectedColumn}"> {{col.valueName}} </th> </tr> </thead> <tbody> <tr ng-repeat="row in wm.rows "> <td class="col-xs-4" ng-class="{selected: row.valueName === wm.selectedRow}"> {{row.valueName}} </td> <td ng-repeat="column in wm.columns track by $index" ng-click="wm.valueClick(row.valueName, column.valueName, $index);" ng-class="{selected: $index === wm.selectedIndex && row.valueName===wm.selectedRow}"> <span >{{$index}}</span> </td> </tr> </tbody> </table>and this is what I have in site.css:
.table-list > tbody > tr.selected td { background: #eaf2f8; } .table-list > tbody > tr > td.selected { background: #eaf2f8; color: blue; } .widget .table.table-bordered tr.selected td:first-child{ border-left: solid 8px #2980b9 !important; }What am I missing? We're using bootstrap and the table's header looks a bit different.