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

帖子: 178
体力: 1193
威望: 0
居住地: 广东省广州市

发表于 2006-5-15 09:05:00 |显示全部楼层

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

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

集思广益.精益求精.

西部数码顶级域名注册商39元抢注！

jevin　

小丑鱼

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

帖子: 1562
体力: 5411
威望: 0

发表于 2006-5-15 11:42:00 |显示全部楼层

div做细线表格?

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

SenFe　

盛飞

帖子: 6222
体力: 12069
威望: 14
居住地: 四川省成都市

发表于 2006-5-15 18:12:00 |显示全部楼层

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

承接程序定制、修改。

m173　

传说里的哥

帖子: 7617
体力: 10043
威望: 0
居住地: 广东省珠海市

发表于 2006-5-15 22:18:00 |显示全部楼层

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

装Ｂ的感觉真好

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

集思广益.精益求精.

marvellous　

金翅擘海

钻石会员

帖子: 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 |显示全部楼层

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

pigeonno1　

季子乌

帖子: 1874
体力: 4837
威望: 57
居住地: 浙江省杭州市

发表于 2006-9-23 14:30:15 |显示全部楼层

o

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

p.pnq.cc爱乌及屋~~

wolf2999　

钻石会员

帖子: 1912
体力: 7180
威望: 4
居住地: 广东省广州市

发表于 2006-9-23 15:30:28 |显示全部楼层

好东西的.收藏先!

http://www.wolf2999.cn

reterry　

脚本之家

帖子: 202
体力: 1006
威望: 1
居住地: 江苏省徐州市

发表于 2006-9-24 21:57:17 |显示全部楼层

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

小说

aultoale　

番茄红了

金牌会员 

帖子: 1560
体力: 4013
威望: 41
居住地: 广东省广州市

发表于 2006-9-24 22:44:16 |显示全部楼层

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

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

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

cycloned　

程让

帖子: 1668
体力: 7009
威望: 1

发表于 2006-9-25 08:45:39 |显示全部楼层

DIV是做这个的吗？

前端开发

mickeyboy　

宝疙瘩

高级会员

帖子: 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 |显示全部楼层

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

information0330　

新手上路

帖子: 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后表格就会出现问题