td单元格中含有input 时的colspan属性

最新推荐文章于 2023-01-11 02:20:44 发布

最新推荐文章于 2023-01-11 02:20:44 发布 · 783 阅读

文章标签：

#HTML

html 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了HTML表格布局中input输入框宽度的问题，并通过示例代码详细解释了如何利用colspan属性与style属性来实现跨列效果及调整输入框宽度。

[size=24][color=red]1.如下所示的代码，input输入框并不会占三列,好像colspan不起作用[/color][/size]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY>
<table border=2>
<tr>
<td >项目名称</td>
<td ><input type="text" name="projectName" value="" ></td>
<td >项目编号</td>
<td ><input type="text" name="projectCode" value=""></td>
</tr>
<tr>
<td >生产令号</td>
<td colspan=3><input type="text" name="productNo" value="5" ></td>
</tr>
</table>
</BODY>
</HTML>
[size=24][color=red]2.只有在input的属性中加入如下代码才行style="width:100%",下面是完整代码[/color][/size]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY>
<table border=2>
<tr>
<td >项目名称</td>
<td ><input type="text" name="projectName" value="" ></td>
<td >项目编号</td>
<td ><input type="text" name="projectCode" value=""></td>
</tr>
<tr>
<td >生产令号</td>
<td colspan=3><input type="text" name="productNo" value="5" [size=18][color=red]style="width:100%"[/color][/size]></td>
</tr>
</table>
</BODY>
</HTML>