在网页中如何用css+div实现表格效果

2025-03-10 16:29:13

推荐回答（4个）

回答1：

在网页中用css+div实现表格效果，首先我们需要理解的就是div是一个块级元素，可以在里面包裹其他的div，通过给这些div这是不同的高度，宽度，还有一些float属性，就可以实现如同表格一样的布局，具体看代码来理解下:

宽度的学习

导航条

店铺图片

左侧目录

右侧内容

尾区

尾招

回答2：

首先说一下你领导真心的不懂代码，对于数据显示，web标准里还是应该还table来解决，不是说用div就标准化了。div只是一个无实际意义的标签。
对于像你这样的数据，可以用ul li来解决

内容
内容
内容
内容

在css里给li定义一个border，这样就显示出边框了，同时对li进行下边框border-bottom-width:0;设置为无。最后一个li设置为有。这样就表面上形成一个你所要求的table样式。

回答3：

格式用这种，然后用CSS分别定义li即可

回答4：

看你这表格也就一个简单的4行一列，难怪你的领导让你换成div……，建议如下：

内容

.wrapper {
width: 500px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.wrapper > div {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
这样也能实现你要的效果，可根据实际需求修改样式。