How to Control Table Cell Width When Inserting INPUT Field with JQuery

I've got an edit in place feature on a web page that is targeted for webkit. The HTML is trivial.

I attach a click handler to each cell with jQuery:

$("table td").click(editMe);

function editMe(e) {
  var w = $(this).width();  // returns cell width
  $(this).html("<span>Foo</span");  // does not change table width
  $(this).html('<input type="te开发者_C百科xt" />');  // CAUSES CELL width to BLOW UP! (gets VERY wide)

  var in = $('<input type="text" />');
  in.width(w-10);
  $(this).html(in);    // CAUSES CELL WIDTH TO BLOW UP!  (nearly doubles)
}

No amount of setting the width seems to make ANY difference. Input has no padding, or margins, no borders. The table cell width just goes berzerk. Focus is on Webkit (Safari / Adobe AIR). But WHY?

How can I have the input dimensions MATCH the table cell it is being inserted into?

Okay, I didn't get the exact answer, but it turns out the culprit lay in the reset.css file of the 960Grid CSS Framework. I don't know exactly which setting caused the bizarre behavior, but removing that file fixed it.

960Grid is a simple CSS Framework I like to work with but something about their reset.css file caused my tables to blow up. As soon as I removed that file, the tables behaved as expected.