加input的时候为什么下面的td会受到影响？？？

为什么我在职责表述：后面加<input type="text" name="">的话，下面的工作任务的td长度会变长？ 怎么才能不让工作任务的td长度不变的情况下，在职责表述后面加个input text？

给input加样式 设置宽度不超过td

<style>
table {width:100%;}
table tr th {text-align: center; vertical-align:middle}
table tr td {font-size:12px;}

table.hborder {border-right: 1px solid #333333;font-size:12px; font-family:Arial;border-collapse:collapse; cellspacing="0" cellpadding="0"; text-align:center;}
.hborder td {border: 1px solid #333333; height:30px; vertical-align:middle;} 
.small input {width:30px;border:1px solid #DEDEDE;background-color:#F9F9F9;font-size:12px;}
.middle input {width:70px;border:1px solid #DEDEDE;background-color:#F9F9F9;font-size:12px;}
.big input{width:140px;border:1px solid #DEDEDE;background-color:#F9F9F9;font-size:12px;}
</style>

<table class="hborder">
<tr>
<td width="20%">
岗位名称
</td>
<td width="30%">
<input type="text" name="job_title">
</td>
<td width="20%">

</td>
<td width="30%">

</td>
</tr>
<tr>
<td>
所在部门
</td>
<td>
<input type="text" name="dept">
</td>
<td>
岗位定员
</td>
<td>
<input type="text" name="position_capacity">
</td>
</tr>
<tr>
<td>
直接上级
</td>
<td>
<input type="text" name="direct_super">
</td>
<td>
MATE类别
</td>
<td>
<input type="text" name="mate_type">
</td>
</tr>
<tr>
<td>
直接下级
</td>
<td>
<input type="text" name="direct_sub">
</td>
<td>
岗位分析日期
</td>
<td>
<input type="text" name="date_of_job_analysis">
</td>
</tr>
</table>
<table class="hborder">
<tr>
<td colspan="5" style="text-align: left;">
<b>职责与工作任务</b>:
</td>
</tr>
<tr>
<td rowspan="4" width="7%">职责一</td>
<td colspan="2" width="56%" style="text-align: left;">职责表述:</td>
<td width="22%">占全部职责百分比:</td>
<td width="15%"></td>
</tr>
<tr>
<td rowspan="3" width="4%">工作任务</td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>

</table>

HTML code

<table style="table-layout:fixed">

给table加上这个css属性

HTML code

        <td rowspan="4" width="7%">
            职责一
        </td>
        <td colspan="2" width="56%" style="text-align: left; position:relative">
            职责表述:
            <input type="text" style="position:absolute;  />
        </td>

把那个html变成这样就行了

4楼的可以是可以，但text的位置不对，text的位置靠下了，而且把td的bottom边线都给占据了

加 top 属性

加vertical-align:top是可以，但职责表述也top上去了，而且有点太top， 怎么middle就不行了呢??

这个是绝对定位，你可以自己设置位置啊? 
打个比方:left:100px;离父元素边界左边100px
top:10px 就是离父元素上边界10px
位置可以自己调的

+1

我说的top 不是指vertical-align:top 是定位的top