使用CSS对HTML表单进行修饰,效果与excel表格类似,可以输入数据。_百 ...
发布网友
发布时间：2022-04-24 14:55
共1个回答
热心网友
时间：2022-04-06 14:06
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
input{ border:0px;}
.ov{ border:2px solid #009999;}
.input{ border:0px;}
</style>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="366" border="0" cellspacing="1" bordercolor="#333333" bgcolor="#333333">
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"> </td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>A</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>B</label></td>
</tr>
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">1</td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield" />
</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield2" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">2</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield3" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield4" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">3</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield5" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield6" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">4</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield7" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield8" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">5</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield9" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield10" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
做了一个，功能差不多的。
