一个可伸缩渐变圆角带边框铺阴影的table,兼容浏览器、自适应宽高的一段HTML+CSS代码。

某天看见某同学QQ签名写着这个，自己想了一下要怎么实现呢？后来花了点时间写出来了

效果如：http://xiebiji.com/works/roundtable
文件打包：点我下载
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" />
<title>一个可伸缩渐变圆角带边框铺阴影的table</title>
</head>
 
<body>
<div class="contentIner">
    <div class="rshadow">
        <div class="tableDiv">
         <table border="0" cellpadding="0" cellspacing="0" class="round">
           <thead><tr><th class="first">Place</th>
           <th>Estimated km.</th><th>Extimated taxi fee(RMB)</th><th class="last">Map<span>(<a href="http://www.cantonfair.net/guangzhoumap.htm">Guangzhou Maps</a>)</span></th></tr></thead> 
           <tbody>
              <tr><td>Canton Fair Liuhua Complex</td><td>13 KM</td><td>39</td><td rowspan="5"><img src="img/temp/nanyangroyalhotel-x2.jpg" alt="map"/><a href="http://www.cantonfair.net/mapfile/mapnanyangroyalhotel.htm" target="_blank"><br/></a></td></tr>
              <tr class="rOdd"><td>Canton Fair Pazhou Complex</td><td>6 KM</td><td>12</td></tr>
              <tr><td>New Baiyun Airport (Huadu)</td><td>36 KM</td><td>105</td></tr>
              <tr class="rOdd"><td>Guangzhou Railway Station</td><td>14 KM</td><td>42</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
              <tr><td>Guangzhou-Kowloon Station</td><td>3 KM</td><td>21</td></tr>
           </tbody>
        </table>
        </div>
  </div>
 </div>
</body>
</html>

css代码如下：

*{
margin:0;
padding:0;
font-family:Arial,'Microsoft Sans Serif',sans-serif;
}
.round{
width:100%;
}
.contentIner{
background:url(shadowDown.gif) repeat-x bottom;
width:80%;
margin:20px auto;
}
.rshadow{
background:url(shadowRight.gif) repeat-y right;
}
th.first{
background:url(roundLeft.gif) no-repeat top left;
padding-left:12px;
}
th.last{
padding-right:12px;
background:url(roundRight.gif) no-repeat top right;
}
table{
background:url(line.gif) repeat-x;
}
thead tr{
height:32px;
 
}
.tableDiv{
padding-bottom:11px;
padding-right:11px;
background:url(shadowConer.gif) no-repeat bottom right;
}

假如你想把右上角的那个阴影的瑕疵点也去掉的话，就改.tableDiv的padding-right为0,然后修改roundRight.gif图片使刚好吻合就OK了
转载请注明出处：http://xiebiji.com/2009/01/table

4 Responses to 一个可伸缩渐变圆角带边框铺阴影... »

RSS Feed for this Entry.

林木木评论 2009-01-24 12:39
技术活，这才是技术活…
我是只有看代码的份，叫我写… （得搜索个半天）

回复
joe 回复一月 24th, 2009 at 12:42
看多了就会写了

回复
lucker 评论 2010-12-27 17:20
lz网站效果挺炫的.可惜不兼容IE

回复
空间素材评论 2012-01-06 17:20
正好用到这个。

回复