打印

用DIV+CSS如何实现这种表格效果?

intotheskysea [楼主]

高级会员

帖子: 178
体力: 580
威望: 0
当前: 广东广州
离线: 25 天

专长 网页设计,平面

1^# 大中小发表于 2006-5-15 09:05

如题，这种效果用div+css来实现的话，该怎么写呢?

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

集思广益.精益求精.

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

jevin

小丑鱼

银牌会员

帖子: 1554
体力: 2767
威望: 0
当前: 上海杨浦
离线: 10 天

2^# 大中小发表于 2006-5-15 11:42

div做细线表格?

xhtml/css/Ajax/AS/php/mysql你才是程序员，你家全是程序员 -__-

TOP

PSD网页模板下载,高端实用 | 免费自助建站

SenFe

盛飞

钻石会员

认证
帖子: 5794
体力: 10408
威望: 14
当前: 四川成都

专长 ASP,Access

3^# 大中小发表于 2006-5-15 18:12

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

人前不议人非，静坐常思己过。

TOP

m173

传说里的哥

钻石会员

认证
帖子: 6876
体力: 5561
威望: 0
当前: 广东珠海
离线: 3 天

专长 网页设计,平面,前端制作

4^# 大中小发表于 2006-5-15 22:18

到D是怎么回事啊``那个值控制它这样排的```

成才三个条件:有梦想、能折腾和不要脸!.

TOP

intotheskysea [楼主]

高级会员

帖子: 178
体力: 580
威望: 0
当前: 广东广州
离线: 25 天

专长 网页设计,平面

5^# 大中小发表于 2006-5-16 14:17

谢谢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">
就显示就变形了,还有没有更好的方法能够兼容的呢? 期盼更好的解决

集思广益.精益求精.

TOP

marvellous

金翅擘海

钻石会员

帖子: 14658
体力: 28160
威望: 143
当前: 北京朝阳区

6^# 大中小发表于 2006-5-16 14:37

参考一下"网页标准化专栏"关于表格和层的相关讨论。
表格与层同属于“块”元素。但在传递数据和线分割问题上，层的功能与表格的功能相差甚远。让div+li+span+css去模拟多行多列的复杂表格单元格，这就好比“赶着鸭子上架”、“牛不喝水强按头”。下面例子显示多行多列表格的一种做法，你也可以试试用div+li+span+css去模拟：

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

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

jevin

小丑鱼

银牌会员

帖子: 1554
体力: 2767
威望: 0
当前: 上海杨浦
离线: 10 天

7^# 大中小发表于 2006-5-16 14:37

用li 浮动试试

xhtml/css/Ajax/AS/php/mysql你才是程序员，你家全是程序员 -__-

TOP

SenFe

盛飞

钻石会员

认证
帖子: 5794
体力: 10408
威望: 14
当前: 四川成都

专长 ASP,Access

8^# 大中小发表于 2006-5-16 18:05

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

不知道对齐没有咯，自己调整下宽度就可以了，偶对这个还不太熟呢~~~~

人前不议人非，静坐常思己过。

TOP

dext

中级会员

帖子: 243
体力: 320
威望: 0
离线: 283 天

9^# 大中小发表于 2006-9-23 01:28

都不标准，没有解决办法啊，郁闷

人生难得几回搏~

TOP

sandra

初级会员

帖子: 52
体力: 159
威望: 0
离线: 658 天

10^# 大中小发表于 2006-9-23 01:42

呵呵，看看。
好久不关注WEB制作了。

尽心尽力，只求更高！

TOP

TBlack

银牌会员

帖子: 1973
体力: 1557
威望: 1
当前: 江苏南京

11^# 大中小发表于 2006-9-23 09:58

在opera下没一个正常的。。真是没事找事。。

TOP

ariex

Dreamlessness

金牌会员

帖子: 4761
体力: 4679
威望: 11
当前: 大洋洲澳大利亚
离线: 1 天

专长 前端制作,JS,C#

12^# 大中小发表于 2006-9-23 10:14

该用表格的时候用层，这算什么？！

TOP

pigeonno1

季子乌

银牌会员

认证
帖子: 1598
体力: 952
威望: 57
当前: 浙江杭州

专长 网页设计,CG,策划

13^# 大中小发表于 2006-9-23 14:30

o

真正运用的时候，未必是一定要用表格才实现这个效果的。
不过XHTML又不是不让你用表格了，弄得这么悬…

p.pnq.cc爱乌及屋~~

TOP

wolf2999

金牌会员

帖子: 1895
体力: 3547
威望: 4
当前: 广东广州
离线: 4 天

14^# 大中小发表于 2006-9-23 15:30

好东西的.收藏先!

http://www.wolf2999.cn

TOP

reterry

脚本之家

中级会员

帖子: 202
体力: 495
威望: 1
当前: 江苏徐州
离线: 23 天

专长 JS,PHP,ASP

15^# 大中小发表于 2006-9-24 21:57

思路最重要，方法不错，不过应用不推荐了

小说

TOP

aultoale

番茄红了

高级会员

认证
帖子: 1521
体力: 781
威望: 41
当前: 广东广州
离线: 6 天

专长 JS,PHP,项目管理

16^# 大中小发表于 2006-9-24 22:44

引用:

原帖由 ariex 于 2006-9-23 10:14 发表
该用表格的时候用层，这算什么？！

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

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

EGP Framework

TOP

cycloned

程让

金牌会员

帖子: 1514
体力: 3501
威望: 0
当前: 上海浦东
离线: 3 天

专长 网页设计,前端制作,UE

17^# 大中小发表于 2006-9-25 08:45

DIV是做这个的吗？

前端开发

TOP

mickeyboy

宝疙瘩

高级会员

帖子: 383
体力: 845
威望: 35
当前: 山西太原
离线: 22 天

专长 JS,JAVA,MySQL

18^# 大中小发表于 2006-9-25 09:35

使用border-collapse

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

[ 本帖最后由 mickeyboy 于 2006-9-25 09:37 编辑 ]

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

TOP

mgtw

一猪还有一猪兜

高级会员

帖子: 1160
体力: 682
威望: 0
当前: 广东广州

专长 网页设计

19^# 大中小发表于 2006-9-25 13:45

真是一个比一个强``！

FobInfo

TOP

黄黄

中级会员

帖子: 146
体力: 248
威望: 0
当前: 北京朝阳区

20^# 大中小发表于 2006-9-25 15:18

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

TOP

information0330

新手上路

帖子: 4
体力: 9
威望: 0
离线: 1231 天

21^# 大中小发表于 2006-9-26 11:55

引用:

原帖由黄黄于 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后表格就会出现问题