HTML table ignoring element-style width

I have an HTML table where certain cells have very long text contents.

I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.

Is there any way to force the table to respect this width?

Thanks!

JSFiddle: http://jsfiddle.net/sangil/6hejy/35/

(If you inspect the cell you can see the the computed width is different than the element-style width)

HTML:

<div id="tblcont" class="tblcont">
 <table id="pivot_table">
 <tbody>
   <tr>
      <th id="h0" >product</th>
      <th id="h1" >price</th>
      <th id="h2" >change</th>
   </tr>         
   <tr>
      <!-- this is the cell causing trouble -->
      <td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
      <td id="c01" >3212</td>
      <td id="c02" >219</td>         

   </tr>
   <tr>
      <td id="c10" >Acer</td>
      <td id="c11" >3821</td>
      <td id="c12" >206</td>         

   </tr>
</tbody>
</table>
</div>

CSS:

.tblcont {
  overflow: hidden;
  width: 500px;
}

table {
  table-layout: fixed;
  border-collapse: collapse; 
  overflow-x: scroll; 
  border-spacing:0; 
  width: 100%;
}

th, td {
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
}

th {
 height: 50px;
}

?Javascript:

$(document).ready(function() {

  // THIS LINE HAS NO EFFECT!
  $('#c00').width(30);
});?