I found why it didn't work. In the site.css I had also the following after my classes were defined

.widget .table.table-bordered tr th {
    border-top: 0px;
    border-left: 0px;
    background: #f0f0f0;
    border-color: #f0f0f0 !important;
    border-bottom-color: #dbdbdb !important;
    color:#333;
}

So I added

 .table.table-bordered tr th.selected {   
    color: blue;
}

which seems to take care of my first problem - the header is now highlighted.

The only remaining issue is that the Size is shown at the very left and not centered across multiple columns. I want it to be centered.

Do you know why colspan doesn't work the way I want?