Changing <col> style properties via javascript has no effect

Dynamically changing the className or style.backgroundColor has no effect on the rendering of <col>s in Safari. Static styles work fine.

• Set [col1].className="selected"
• Set [col2].className="selected"
• Set [col3].className="selected"

Interestingly, the first line of my window.onload, document.getElementById('col1').className='selected'; works fine, suggesting that Safari runs window.onload before rendering the page? I don't see that this is a clue to any useful solution though.

I've tried it with style.backgroundColor too, which also does not work.

Workaround

Make some other change that forces a redraw of the page, e.g. showing/hiding an element. Sadly quickly hiding and then showing as in document.getElementById('foo').style.display='none';document.getElementById('foo').style.display='block'; does not do the trick :(

Alternatively, resize the window: window.resizeBy(-1,0);window.resizeBy(1,0); Not pretty, but it works.

CSS

    col.selected{background:#def;}
		

HTML

    <table>
        <colgroup>
            <col />
            <col id="col1" />
            <col id="col2" />
            <col id="col3" />
        </colgroup>
		

Javascript

    window.onload = function()
    {
        document.getElementById('col1').className='selected';
        
        var aInputs=document.getElementById('radios').getElementsByTagName('input');
        var nInputs=aInputs.length;
        
        for(var i=0;i<nInputs;i++)
            aInputs[i].onclick=updateTable;
    };
    
    
    function updateTable()
    {
        var n = this.id.substring(1);
        alert('Before: Element with id="col'+n+'" has className="'+document.getElementById('col'+n).className+'".');
        
        for (var i=1;i<4;i++)
            if(i==n)
                document.getElementById('col'+i).className='selected';
            else
                document.getElementById('col'+i).className='';
        
        alert('After: Element with id="col'+n+'" has className="'+document.getElementById('col'+n).className+'".');
    }