职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 497|回复: 12

CSS直接输入的Excel表格

  [复制链接]
gz-vps 发表于 2011-8-1 10:01 | 显示全部楼层 |阅读模式
HTML Excel表格可以直接输入。。。


--------------------------------
HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
table.formdata{
border:1px solid #5F6F7E;
border-collapse:collapse;
font-family:Arial;
}

table.formdata caption{
text-align:left;
padding-bottom:6px;
}

table.formdata th{
border:1px solid #5F6F7E;
background-color:#E2E2E2;
color:#000000px;
text-align:left;
font-weight:normal;
padding:2px 8px 2px 6px;
margin:0px;
}

table.formdata td{
margin:0px;
padding:0px;
border:1px solid #ABABAB;
}

table.formdata input{
width:100px;
padding:1px 3px 1px 3px;
margin:0px;
border:none;
font-family:Arial;
}
</style>
</head>

<body>
<form method="post">
        <table class="formdata">
                <caption>公司销售统计表</caption>
                <tr>
                        <th></th>
                        <th scope="col">2004</th>
                        <th scope="col">2005</th>
                        <th scope="col">2006</th>
                        <th scope="col">2007</th>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
               
                <tr>
                        <th>硬盘</th>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                        <td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
                </tr>
        </table>
</form>
</body>
</html>


大小: 72.5 KB
查看图片附件

钰云 发表于 2011-8-1 10:01 | 显示全部楼层
没看懂,什么意思?

月上萧萧 发表于 2011-8-1 10:02 | 显示全部楼层
我也是,没看懂.

愚人 发表于 2011-8-1 10:02 | 显示全部楼层
同样没看懂

天上智喜 发表于 2011-8-1 10:02 | 显示全部楼层
就是利用css样式把table渲染成excel的样子

已经来了吗 发表于 2011-8-1 10:02 | 显示全部楼层
连人家的成品 都看不懂,你们还能不能干点 事业了!

ksdal 发表于 2011-8-1 10:02 | 显示全部楼层
自己操作一下就明白楼主的意思了

yoyo 发表于 2011-8-1 10:02 | 显示全部楼层
<input type="text"。。。
这个就是excel的输入框哇。。。

broken 发表于 2011-8-1 10:03 | 显示全部楼层
我这边IE6无法显示~~
兼容性有问题~~

秋秋 发表于 2011-8-1 10:03 | 显示全部楼层
太多input,考虑只在鼠标移动到一个单元格的时候显示一个input



曾经的小孩 发表于 2011-8-10 10:43 | 显示全部楼层
还呕像.....
无处不在 发表于 2011-8-12 10:10 | 显示全部楼层
照你这么说真的有道理哦 呵呵 不进沙子馁~~~
愚人 发表于 2011-9-15 10:24 | 显示全部楼层
我在顶贴~!~
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 10:23 , Processed in 0.143149 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表