请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 4293|回复: 22

用DIV+CSS如何实现这种表格效果? [复制链接]

intotheskysea 楼主
帖子
178
体力
1193
威望
0
居住地
广东省 广州市
发表于 2006-5-15 09:05:00 |显示全部楼层
如题,这种效果用div+css来实现的话,该怎么写呢?

 提示:您可以先修改部分代码再运行

集思广益.精益求精.
西部数码顶级域名注册商39元抢注!
jevin 

小丑鱼

银牌会员

帖子
1562
体力
5411
威望
0
发表于 2006-5-15 11:42:00 |显示全部楼层
div做细线表格?
xhtml/css/Ajax/AS/php/mysql你才是程序员,你家全是程序员 -__-
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

SenFe 

盛飞

钻石会员 手机认证 

帖子
6222
体力
12069
威望
14
居住地
四川省 成都市
发表于 2006-5-15 18:12:00 |显示全部楼层

 提示:您可以先修改部分代码再运行

承接程序定制、修改。

使用道具 举报

m173 

传说里的哥

钻石会员 手机认证 

帖子
7617
体力
10043
威望
0
居住地
广东省 珠海市
发表于 2006-5-15 22:18:00 |显示全部楼层
到D是怎么回事啊``那个值控制它这样排的```
装B的感觉真好

使用道具 举报

intotheskysea 楼主
帖子
178
体力
1193
威望
0
居住地
广东省 广州市
发表于 2006-5-16 14:17:00 |显示全部楼层
谢谢SenFe 不过你的方法还是有些问题
一旦在代码头加上
<!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">
就显示就变形了,还有没有更好的方法能够兼容的呢? 期盼更好的解决
集思广益.精益求精.

使用道具 举报

金翅擘海

钻石会员

帖子
16559
体力
37158
威望
143
发表于 2006-5-16 14:37:00 |显示全部楼层
参考一下"网页标准化专栏"关于表格和层的相关讨论。
表格与层同属于“块”元素。但在传递数据和线分割问题上,层的功能与表格的功能相差甚远。让div+li+span+css去模拟多行多列的复杂表格单元格,这就好比“赶着鸭子上架”、“牛不喝水强按头”。下面例子显示多行多列表格的一种做法,你也可以试试用div+li+span+css去模拟:

 提示:您可以先修改部分代码再运行


┏┯┓┏┯┓┏┯┓┏┯┓
┨┠┨┠┨┠
┗┷┛┗┷┛┗┷┛┗┷┛

使用道具 举报

jevin 

小丑鱼

银牌会员

帖子
1562
体力
5411
威望
0
发表于 2006-5-16 14:37:00 |显示全部楼层
用li 浮动试试
xhtml/css/Ajax/AS/php/mysql你才是程序员,你家全是程序员 -__-

使用道具 举报

SenFe 

盛飞

钻石会员 手机认证 

帖子
6222
体力
12069
威望
14
居住地
四川省 成都市
发表于 2006-5-16 18:05:00 |显示全部楼层

 提示:您可以先修改部分代码再运行



不知道对齐没有咯,自己调整下宽度就可以了,偶对这个还不太熟呢~~~~
承接程序定制、修改。

使用道具 举报

dext 
帖子
242
体力
525
威望
0
发表于 2006-9-23 01:28:24 |显示全部楼层
都不标准,没有解决办法啊,郁闷
人生难得几回搏~

使用道具 举报

sandra 
帖子
52
体力
164
威望
0
发表于 2006-9-23 01:42:18 |显示全部楼层
呵呵,看看。
好久不关注WEB制作了。
尽心尽力,只求更高!

使用道具 举报

TBlack 
帖子
2294
体力
2538
威望
1
居住地
广东省 深圳市
发表于 2006-9-23 09:58:15 |显示全部楼层
在opera下没一个正常的。。真是没事找事。。

使用道具 举报

ariex 

Dreamlessness

钻石会员

帖子
4960
体力
13275
威望
11
居住地
大洋洲 澳大利亚
发表于 2006-9-23 10:14:20 |显示全部楼层
该用表格的时候用层,这算什么?!

使用道具 举报

季子乌

钻石会员 手机认证 

帖子
1874
体力
4837
威望
57
居住地
浙江省 杭州市
发表于 2006-9-23 14:30:15 |显示全部楼层

o

真正运用的时候,未必是一定要用表格才实现这个效果的。
不过XHTML又不是不让你用表格了,弄得这么悬…
p.pnq.cc爱乌及屋~~

使用道具 举报

帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-9-23 15:30:28 |显示全部楼层
好东西的.收藏先!

使用道具 举报

脚本之家

银牌会员

帖子
202
体力
1006
威望
1
居住地
江苏省 徐州市
发表于 2006-9-24 21:57:17 |显示全部楼层
思路最重要,方法不错,不过应用不推荐了

使用道具 举报

番茄红了

金牌会员 手机认证 

帖子
1560
体力
4013
威望
41
居住地
广东省 广州市
发表于 2006-9-24 22:44:16 |显示全部楼层
原帖由 ariex 于 2006-9-23 10:14 发表
该用表格的时候用层,这算什么?!


说难听一点就是:脱裤子放屁!!

DIV+CSS的优势不是体现在这些地方的~~如果楼主仅仅是为了学习才这样做的话,我收回上一句话。

使用道具 举报

程让

钻石会员 手机认证 

帖子
1668
体力
7009
威望
1
发表于 2006-9-25 08:45:39 |显示全部楼层
DIV是做这个的吗?

使用道具 举报

宝疙瘩

高级会员

帖子
382
体力
850
威望
35
居住地
山西省 太原市
发表于 2006-9-25 09:35:40 |显示全部楼层

使用border-collapse

 提示:您可以先修改部分代码再运行


[ 本帖最后由 mickeyboy 于 2006-9-25 09:37 编辑 ]
Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

使用道具 举报

mgtw 

一猪还有一猪兜

银牌会员

帖子
1244
体力
1479
威望
0
居住地
广东省 广州市
发表于 2006-9-25 13:45:33 |显示全部楼层
真是一个比一个强``!

使用道具 举报

黄黄 
帖子
148
体力
510
威望
0
发表于 2006-9-25 15:18:30 |显示全部楼层

 提示:您可以先修改部分代码再运行

使用道具 举报

帖子
4
体力
14
威望
0
发表于 2006-9-26 11:55:14 |显示全部楼层
原帖由 黄黄 于 2006-9-25 15:18 发表
<!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/xhtm ...


不明白为什么#div1 ul li {
        float: left;
        width: 149px;
        height: 50px;
        list-style-type: none;
        border-right:#000 1px solid;
        border-bottom: #000 1px solid;
        text-align: center;
        line-height: 50px;
}
<li style="width: 449px;">1</li >
中的width设置要是149.449,改为150.500后表格就会出现问题

使用道具 举报

wolong 

帅绝人寰

金牌会员 手机认证 

帖子
4408
体力
4440
威望
0
居住地
四川省 成都市
发表于 2006-9-26 16:02:39 |显示全部楼层
这种情况用表格就行了,觉得没必要用div瞎折腾。
用div布局个左右分栏还可以。

使用道具 举报

abrush 

妖怪

钻石会员 手机认证 

帖子
309
体力
6006
威望
1
居住地
陕西省 西安市
发表于 2006-9-29 10:04:45 |显示全部楼层
DIV的布局不是不再用table,table只是不再用来布局了而已,就像它的字面意思一样,如果你要表述的就是一个“表格”,那就用table吧

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 08:00 , Processed in 0.188001 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部