读书人

怎么将input设置和td一样大且不改变样

发布时间: 2013-04-21 21:18:07 作者: rapoo

如何将input设置和td一样大且不改变样式
撸主最近要设计word表格形式的页面,发现input很难和td框契合
这是撸主的代码


<table id="list_tab" width="800" height="630" align="center" style="width:100%;border:0;border-collapse:collapse;cellspacing:0;cellpadding:0">
<tr>
<td width="133">单位全称</td>
<td colspan="2"><input type="text"/></td>
<td width="133">电子邮箱</td>
<td colspan="2"><input type="text" /></td>
</tr>
<tr>
<td>现实际经营地址</td>
<td colspan="3"><input type="text"/></td>
<td width="133">邮政编码</td>
<td width="156"><input type="text"/></td>
</tr>
<tr>
<td height="51">上级主管单位(部门)</td>
<td colspan="2"><input type="text"/></td>
<td>单位状态</td>
<td colspan="2">
<div style="text-align: left;float: left;padding-left: 30px;">
<input type="radio" name="UnitStats" value="" />正常<br/>
<input type="radio" name="UnitStats" value="" />吊销、注销<br/>
<input type="radio" name="UnitStats" value="" />破产、关闭、解散
</div>
<div style="text-align: left;float: left;padding-left: 30px;">
<input type="radio" name="UnitStats" value="" />无证照<br/>
<input type="radio" name="UnitStats" value="" />其他
</div>
</td>
</tr>
<tr>


<td>注册登记机关</td>
<td width="112"><input type="text"/></td>
<td width="109">成立日期</td>
<td><input type="text"/></td>
<td>注册号</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>注册地址</td>
<td colspan="3"><input type="text"/></td>
<td>注册资金(万元)</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>营业执照变更前名称</td>
<td colspan="2"><input type="text"/></td>
<td>营业执照变更前地址</td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr>
<td>组织机构代码证号</td>
<td colspan="3"><input type="text"/></td>
<td>社保登记号</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>法定代表人(或负责人)</td>
<td><input type="text"/></td>
<td>办公电话</td>
<td><input type="text"/></td>
<td>身份证号码</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>人力资源负责人</td>
<td><input type="text"/></td>
<td>办公电话</td>
<td><input type="text"/></td>


<td>移动电话</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>人力资源经办人</td>
<td><input type="text"/></td>
<td>办公电话及传真电话</td>
<td><input type="text"/></td>
<td>移动电话</td>
<td><input type="text"/></td>
</tr>
</table>


.css:

* {
font-family: "宋体";
font-size: 12px;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#list_tab th{
text-align: center;
border: 1px solid #E0E4EB;
}
#list_tab td{
text-align: center;
border: 1px solid #E0E4EB;
}
#list_tab input{
border:0;
background:transparent;
}

input输入框不能填满整个表格,如果将input的样式设成height:100%;width:100%;单选框会变形.求解决办法! HTML CSS
[解决办法]
<table width="50%" cellpadding="0" cellspacing="0">
<tr >
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>

<style type="text/css">
table,th,td{
border:1px solid #328AA4;
}
td input{
border:none;
width:100%;
}
</style>
[解决办法]
二楼的做法真的不错,已测试,非常好的效果,顶一个!

读书人网 >CSS

热点推荐