how to make column width "auto-adjustable" with page?

Hi,

I am using below script to adjust the column width in the list view page,

<style>
th.ms-vh2 div[DisplayName='Report']{
width:400px;
}
th.ms-vh2 div[DisplayName='Description']{
width:500px;
}
th.ms-vh2 div[DisplayName='Category']{
width:200;
}</style>

It looks like below now, however, the column width numbers are hard-coded, so when user resizes the browser they will need to scroll to right to see all columns, so my question is how to make the column width "auto-adjustable" to the page width?

I tried changing the px number to percentage, something like below, but it does not work...

<style>
th.ms-vh2 div[DisplayName='Report']{
width:20%;
}
th.ms-vh2 div[DisplayName='Description']{
width:60%;
}
th.ms-vh2 div[DisplayName='Category']{
width:20%;
}</style>

Thanks,

Michael