页面表格可编辑input框变大的问题

1、在页面添加表格表头

<table width="100%" border="1" id="damageTab">

<tr>

    <td width="10px" align="center">序号</td>

    <td width="100px" align="center">车损详情</td>

    <td width="20px" align="center">罚金</td>

    <td width="20px" align="center">

        <a href="javascript:void(0)" οnclick="addRow()">增加新条目</a>

    </td>

</tr>

</table>

2、js 代码添加行记录

$ ( "#damageTab tbody " ).append( '<tr><td align="center" bgcolor="#FFFFFF" height="19px">' + $ ( "#damageTab tr " ).length + '</td><td align="center" bgcolor="#FFFFFF"></td><td align="center" bgcolor="#FFFFFF"></td> <td align="center" bgcolor="#FFFFFF"><a href="javascript:void(0)" οnclick=" delRow (this)">删除</a></td></tr>' );

3、表格可编辑

function editCell() {

    //给这些单元格注册鼠标点击事件

    $("#damageTab td:gt(3)").dblclick(function () {

        var tdObj = $(this);

        var inputObj = $("<input type='text' style='border-width: 0px;width: 100%;height: 100%;' value='" + $(this).text() + "'/>");

        inputObj.click(function () {

            return false;

        });

        tdObj.html(inputObj);

        //文本框失去焦点的时候变为文本

        inputObj.blur(function () {

            tdObj.html(inputObj.val());

        });

        //全选

        inputObj.trigger("focus").trigger("select");

    });

};

出现的问题：双击表格添加记录时表格宽高变形 并且input框没有全部填充表格

解决方法：表头的宽度应该使用百分比% 同时cellspading=0

<table width="100%" border="1" cellpadding="0" id="damageTab">

    <tr>

        <td width="8%" align="center">序号</td>

        <td width="66%" align="center">车损详情</td>

        <td width="13%" align="center">罚金</td>

        <td width="13%" align="center">

            <a href="javascript:void(0)" οnclick="addRow()">增加新条目</a>

        </td>

    </tr>

</table>