I have a table with slanted text in the header row, the only problem is that the text still makes the width of the columns way to large. Is there any way to squish together the table columns so that they are about the width of the select boxes? Or is there a way to place the text there without it in the header and maybe just use a <div> or <p>?

Here is the fiddle I am working with: http://jsfiddle.net/t9Krg/1/

.slanted {

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);


    white-space:nowrap;
    /*
    display:noblock;
    */
}

The boarders around the header is just to see the extra spacing and will be removed later.