一直以前网友们对table样式美化都头痛，现在很多页面布局都已经丢弃了使用table布局，今天刚好在浏览网页的时候看到一个样式很好看的代码就把它整理出来分享给大家了,css用ul取代table实用响应式表格效果，只用了纯css样式代码，没有任何的jquery或javascript代码参考，可以直接拿来使用。。。
样式代码如下：
html {
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
a:focus {
outline:thin dotted #333;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px
}
a:hover,a:active {
outline:0
}
ul,ol {
padding:0;
margin:0;
list-style:none
}
li {
line-height:20px
}
ul.inline,ol.inline {
margin-left:0;
list-style:none
}
ul.inline > li,ol.inline > li {
display:inline-block;
*display:inline;
*zoom:1;
padding-left:5px;
padding-right:5px
}
ul.table {
clear:both;
margin:0 0 16px 5px;
}
.table ul {
border-left:1px solid #D6DBE0;
border-top:1px solid #D6DBE0;
margin-bottom:15px;
margin-right:-1px;
margin-left:0px;
overflow:auto;
}
.table ul li {
float:left;
width:25%;
list-style:none;
background:none;
padding:0px;
margin:0px;
text-align:center;
}
.table ul li a {
border-bottom:1px solid #D6DBE0;
border-right:1px solid #D6DBE0;
display:block;
height:22px;
overflow:hidden;
padding:6px 5px;
text-decoration:none;
color:#333;
font-size:14px;
font-weight:bold;
}
.table ul li a:hover,.table ul li a.hover04 {
border-bottom:2px solid #F60;
font-weight:bold;
height:21px;
color:#F60;
text-decoration:none;
}
.table ul li img {
margin:0 10px 0 5px;
position:relative;
top:-1px;
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
表格布局 响应式 css特效