I think [width 100%] could be a problem with this approach since the borders and padding of the text box take up some with that is added to the width.
Indeed.
You can compensate for this by adding padding-right
to the cell containing the input (or just to all cells) of similar size to the borders-and-padding of the input. The input then expands out of the cell content area, but only onto the padding so it doesn't make a mess.
That's OK for just normal text inputs. If you've also got other elements such as select boxes or buttons you wish to resize this way, the padding method can backfire because on IE the ‘width’ of a select is inclusive of the border and padding (due to being an OS widget).
For most browsers, the easiest and most consistent way to fix this is the CSS3 box-sizing property:
td.input input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
IE6-7 doesn't support this yet, so you can still get fields that don't quite line up in these browsers. If you care, you can add a padding workaround specifically for those.