How to reduce the width of columns in tablesorter

I'm trying to set the width for the columns in JQuery Tablesorter.

I have an example http://jsfiddle.net/4mVfu/5647/

I have 6 columns. I'm trying to adjust the width suitable to my browser window, but for some reason I'm failing in resizing the width of the header and the items in the <body> tag.
In the example, I want the first column to be 10%, the second column to be 10% and the third column to be 10%, the fourth to be 50% and remaining two rows to be 10% each adding to 100%. I tried this:

.tablesorter td:nth-child(6n+1) {
width: 10%;
 }
.tablesorter td:nth-child(6n+2) {
width: 10%;
}
.tablesorter td:nth-child(6n+3) {
width: 10%;
}
.tablesorter td:nth-child(6n+4) {
width: 50%;
  }
 .tablesorter td:nth-child(6n+5) {
width: 10%;
 }
 .tablesorter td:nth-child(6n+6) {
width: 10%;
  }

Any suggestions how to do this?

Solution

You could apply width to multiple columns at once.

.tablesorter  td:nth-child(1),
.tablesorter  td:nth-child(2),
.tablesorter  td:nth-child(3),
.tablesorter  td:nth-child(5),
.tablesorter  td:nth-child(6)
{
  width : 10% !important;
  min-width : 100px !important;
}
.tablesorter  td:nth-child(4)
{
  width : 50% !important;
  min-width : 200px !important;
}

mid-width here is just to keep the good look and feel. But you could try playing around and figure out the expected behavior.

Also try setting resizable_widths: [ '10%', '10%', '10%','50%','10%','10%'] in widget options. But i believe purpose of this option is to keep resizable width saved. Refer to documentation for widget it might help better.

JSFiddle: http://jsfiddle.net/cL2f6k18/