DIV+CSS实现表格功能(不支持IE6、IE7)
有个简单的方法,使用display:table,display:table-row,display:table-cell就可以实现,而且支持元素的垂直居中对齐,关联伸缩(高度小的容器会自适应那些高度相对较高的),但IE6/7不支持此属性。
与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如:float, position:absolute,所以在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。
实例:
<!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=gb2312" />
<title>DIV+CSS实现表格功能(不支持IE6、IE7)</title>
<style type="text/css">
<!--
* {
font:12px 宋体;
}
.ul_table {
display:table;
width:933px;
border-left:#B0B9D1 solid 1px;
border-bottom:#B0B9D1 solid 1px;
padding:0;
}
.ul_table ul {
display:table-row;
list-style-type:none;
margin:0;
padding:0;
}
.ul_table ul li {
display:table-cell;
line-height:24px;
border-right:#B0B9D1 solid 1px;
border-top:#B0B9D1 solid 1px;
margin:0;
padding:5px;
}
.one {
width:200px;
text-align:center;
vertical-align:middle;
}
.two {
width:500px;
word-wrap:break-word;
overflow: hidden;
}
.three {
width:200px;
text-align:center;
}
.four {
width:711px;
word-wrap:break-word;
overflow: hidden;
}
#border_0 {
border-top-width:0px;
}
-->
</style>
</head>
<body>
<div class="ul_table">
<ul>
<li class="one">编号</li>
<li class="two">内容</li>
<li class="three">日期</li>
</ul>
<ul>
<li class="one">001</li>
<li class="two">内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three</li>
<li class="three">2012-12-3 14:02:09</li>
</ul>
</div>
<div class="ul_table">
<ul>
<li class="one" id="border_0">001</li>
<li class="four" id="border_0">内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three</li>
</ul>
</div>
</body>
</html>
1.dispaly:table;作为块级元素的表格table显示,也就是将他作为一个表格
2.border-collapse:separate;
http://www.w3school.com.cn/css/pr_tab_border-collapse.asp
3.display:table-row;作为表格行tr显示
4.display:table-cell;作为表格单元格td显示
5.然后定义宽度
6.border-spacing:0px;设置单元格间距
http://www.w3school.com.cn/css/pr_tab_border-spacing.asp
参考: