>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?

Check the element style in the browser.
FWIW the link style for th has 'text-align' set to '-internal-center' by the user agent stylesheet in Chrome.