DIV+CSS实现表格功能（不支持IE6、IE7）
2012-12-08 16:20
323 查看
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
参考：
http://www.chinaz.com/design/2008/1017/41219.shtml
http://www.zhangxinxu.com/wordpress/?p=1187
有个简单的方法，使用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
参考：
http://www.chinaz.com/design/2008/1017/41219.shtml
http://www.zhangxinxu.com/wordpress/?p=1187
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [转]CSS中设置div最小高度(支持IE6, IE7, IE8, FF等浏览器)
- DIV+CSS实现表格功能（不支垂直居中）
- 用css+div实现表格的每行显示3列的功能
- DIV+CSS实现表格功能
- 4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】
- 4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】
- DIV+CSS解决IE6，IE7，IE8，FF兼容问题
- 用css+div如何实现表格显示
- 用div+css怎么实现表格
- DIV+CSS解决IE6，IE7，IE8，FF兼容问题
- 纯CSS下拉式导航菜单，支持IE6、IE7、Firefox，没有用到任何JavaScript，修改方便，而且效果也不错。
- 利用CSS实现DIV在浏览器中位置相对固定，而且IE6下滚动不闪
- DIV+CSS相对IE6 IE7和IE8兼容问题整理
- 【超有用】DIV 的定位问题在IE6和IE7的CSS设置（转）
- IE6，IE7，FF | CSS + DIV 兼容问题综合解决方案
- div+css 布局下兼容IE6 IE7 FF常见问题
- 4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】 （转）
- DIV+CSS解决IE6，IE7，IE8，FF兼容问题
- DIV始终固定在网页右下角位置的CSS实现方法，返回顶部功能
- [原创] css实现透明度（兼容IE6、IE7、Firefox2.0）