关于前台控件布局的问题_html/css_WEB-ITnose

请大神看下图片：
这张图片中的表格（就是带边框的那个样式）是一个图片，本来我是准备把这个作为背景图片的，但是它不能放大，运行后效果不好看，所以我在Body里加入了img，把它的width和height都设置为100%，然后在该输入文字的地方加入控件，上面这张图中的样子是加入控件之后运行前的样子，我把每个控件都放在了div里，并且把position设置为absolute，但是运行后就成这样了，简直难以入目：
，请问是不是有什么已知的方法或者技巧，或者说怎么能把背景图片放大？

回复讨论(解决方案)

<style>	.t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;}	.tr{border-right:1px solid #000;}	.tb{border-bottom:1px solid #000;}	td{padding:5px;}	table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0">	<tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0">		<tr><td><select>			<option>男</option>			</select></td><td>身份证号码</td><td><input/></td></tr>		</table></td></tr></table>

既然img是百分比显示的，那么div的left top 和 width height 也要用百分比来定位啊

<style>	.t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;}	.tr{border-right:1px solid #000;}	.tb{border-bottom:1px solid #000;}	td{padding:5px;}	table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0">	<tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0">		<tr><td><select>			<option>男</option>			</select></td><td>身份证号码</td><td><input/></td></tr>		</table></td></tr></table>

既然用html来做的话，那么我这里还有张完整的图片，您帮忙看看，我关键是不知道那个td怎么一个大一个小一点都不规则的设置。附图：