可编辑的表格页面代码实现

有时候需要用代码编写在客户端网页中可编辑的表格以输入数据提交给后台数据库，做了一个小小的demo，效果图：



代码部分：

<div class="BMform">

<form action="#">
<table class="baoM">
<h1 class="title">第十三届“理想杯”计算机技能大赛报名表</h1>

<tr>
<td scope="row" width="150px">负责人姓名</td>
<td class="fuNa" colspan="2" height="30px"><input type="text" class="fuNa" /></td>
<td width="100px">年级</td>
<td class="fuNa" colspan="2"><input type="text" class="fuNa"/></td>
</tr>
<tr>
<td scope="row">电话</td>
<td class="fuNa" colspan="2"><input type="text" class="fuNa"/></td>
<td>QQ</td>
<td class="fuNa" colspan="2"><input type="text" class="fuNa"/></td>
</tr>
<tr>
<td scope="row">项目名称</td>
<td class="xiNa" colspan="4"><input type="text" class="xiNa"/></td>
</tr>
<tr>
<td scope="row">项目类别</td>
<td class="xiNa" colspan="4"><input type="text" class="xiNa"/></td>
</tr>
<tr>
<td scope="row" rowspan="3">小组成员</td>
<td scope="row" width="100px">姓名</td>
<td class="zuNa"><input type="text" class="zuNa"/></td>
<td scope="row" width="100px">年级</td>
<td class="zuNa"><input type="text" class="zuNa"/></td>
</tr>
<tr>
<!--<td scope="row">小组成员</td>-->
<td scope="row">姓名</td>
<td class="zuNa"><input type="text" class="zuNa"/></td>
<td scope="row">年级</td>
<td class="zuNa"><input type="text" class="zuNa"/></td>
</tr>
<tr>
<!--<td scope="row">小组成员</td>-->
<td scope="row">姓名</td>
<td class="zuNa"><input type="text" class="zuNa"/></td>
<td scope="row">年级</td>
<td class="zuNa"><input type="text" class="zuNa"/></td>
</tr>
<tr>
<td scope="row">备注</td>
<td class="xiNa" colspan="4"><input type="text"class="xiNa"/></td>
</tr>

</table>
</form>
</div>

css:
table.baoM{

width: 960px;
border-collapse:collapse;
}
table.baoM h1{
text-align:left;
padding-bottom:6px;
}
table.baoM td{
height: 40px;
line-height: 40px;
margin:0px;
padding:0px;
font-family: "仿宋";
font-size: 18px;
text-align:center;
line-height: 40px;
border:1px solid #ABABAB;
}

table.baoM input{ /*可输入区域样式*/
display: inline-block;
width:100%;
height: 40px;
line-height: 40px;
margin:0;
padding: 0;
border:none;
background: none;
}