>>Hi everybody,
>>
>>I see the following markup when I examine the element
>>

>><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.
>>
>>Here is my directive HTML
>>
>>

>><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.
>>
>>I want 'Extra Large' to be in blue in the attached picture.
>
>Maybe other problems but one obvious omission - no .css for a th element.....

I think I tried that with no result, but I'll re-try. Should I use thead > tr > th.selected ?

I think that's what I tried.

UPDATE. Tried again now

.table-list > tbody > tr.selected td {
    background: #eaf2f8;    
}
.table-list > tbody > tr > td.selected {
    background: #eaf2f8;
    color: blue;
}

.table-list > thead > tr > th.selected {
    background: #eaf2f8;
    color: blue;
}

and no effect :(

I have another problem :(

I now defined

<th colspan="{{wm.columns.length}}" >
                    {{wm.columnAttribute}}
                </th>

My problem is that the word 'Size' is not centered across the header rows as I want it but rather shows on the left. How can I make it the same as here
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_th_colspan ?