在网页中如何用css+div实现表格效果
我的页面有个：<table><tr><td>内容</td></tr><tr><td>内容</td></tr><tr><td>内容</td></tr><tr><td>内容<...
我的页面有个：
<table>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
</table>
现在我的领导让我把table去掉 换成div 并且要有一定的css效果 怎么搞？ 展开
<table>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
</table>
现在我的领导让我把table去掉 换成div 并且要有一定的css效果 怎么搞？ 展开
4个回答
展开全部
在网页中用css+div实现表格效果，首先我们需要理解的就是div是一个块级元素，可以在里面包裹其他的div，通过给这些div这是不同的高度，宽度，还有一些float属性，就可以实现如同表格一样的布局，具体看代码来理解下:
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/>
<title>宽度的学习</title>
</head>
<body>
<div style="width:960px; height:700px; margin:0 auto; border:solid 1px #999999" >
<div style="width:960px; height:25px; border:solid 1px #CCCCCC;">
导航条
</div>
<div style="width:960px; height:80px; border:solid 1px #CCCCCC;">
店铺图片
</div>
<div style="width:200px; height:400px; border:solid 1px #CCCCCC; float:left;">
左侧目录
</div>
<div style="width:750px; height:400px; border:solid 1px #CCCCCC; float:right;">
右侧内容
</div>
<div style="width:960px; height:17px; border:solid 1px #CCCCCC; float:left;">
尾区
</div>
<div style="width:960px; height:173px; border:solid 1px #CCCCCC; float:left;">
尾招
</div>
</div>
</body>
</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=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/>
<title>宽度的学习</title>
</head>
<body>
<div style="width:960px; height:700px; margin:0 auto; border:solid 1px #999999" >
<div style="width:960px; height:25px; border:solid 1px #CCCCCC;">
导航条
</div>
<div style="width:960px; height:80px; border:solid 1px #CCCCCC;">
店铺图片
</div>
<div style="width:200px; height:400px; border:solid 1px #CCCCCC; float:left;">
左侧目录
</div>
<div style="width:750px; height:400px; border:solid 1px #CCCCCC; float:right;">
右侧内容
</div>
<div style="width:960px; height:17px; border:solid 1px #CCCCCC; float:left;">
尾区
</div>
<div style="width:960px; height:173px; border:solid 1px #CCCCCC; float:left;">
尾招
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先说一下你领导真心的不懂代码，对于数据显示，web标准里还是应该还table来解决，不是说用div就标准化了。div只是一个无实际意义的标签。
对于像你这样的数据，可以用ul li来解决
<ul>
<li>内容</li><li>内容</li><li>内容</li><li>内容</li>
</ul>
在css里给li定义一个border，这样就显示出边框了，同时对li进行下边框border-bottom-width:0;设置为无。最后一个li设置为有。这样就表面上形成一个你所要求的table样式。
对于像你这样的数据，可以用ul li来解决
<ul>
<li>内容</li><li>内容</li><li>内容</li><li>内容</li>
</ul>
在css里给li定义一个border，这样就显示出边框了，同时对li进行下边框border-bottom-width:0;设置为无。最后一个li设置为有。这样就表面上形成一个你所要求的table样式。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
格式用这种，然后用CSS分别定义li即可
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
格式用这种，然后用CSS分别定义li即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看你这表格也就一个简单的4行一列，难怪你的领导让你换成div……，建议如下：
<div class="wrapper">
<div>内容</div>
<div>内容</div>
<div>内容</div>
<div>内容</div>
</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;
}
这样也能实现你要的效果，可根据实际需求修改样式。
<div class="wrapper">
<div>内容</div>
<div>内容</div>
<div>内容</div>
<div>内容</div>
</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;
}
这样也能实现你要的效果，可根据实际需求修改样式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
