用Css控制显示的圆角表格

 

< html >
< head >
< title > css圆角效果 -- 七度空间网页教学网 </ title >
< meta http - equiv = " content-type "  content = " text/html; charset=gb2312 " >
< style type = " text/css " >
div.RoundedCorner ... {background: #9BD1FA}
b.rtop, b.rbottom ... {display:block;background: #FFF}
b.rtop b, b.rbottom b ... {display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1 ... {margin: 0 5px}
b.r2 ... {margin: 0 3px}
b.r3 ... {margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4 ... {margin: 0 1px;height: 2px}
</ style >
</ head >
< body >
< div  class = " RoundedCorner " >
< b  class = " rtop " >< b  class = " r1 " ></ b >< b  class = " r2 " ></ b >< b  class = " r3 " ></ b >< b  class = " r4 " ></ b ></ b >

     < table style = " width: 100%; height: 200px " >
         < tr >
            < td ></ td >
         </ tr >
     </ table >
   

< b  class = " rbottom " >< b  class = " r4 " ></ b >< b  class = " r3 " ></ b >< b  class = " r2 " ></ b >< b  class = " r1 " ></ b ></ b >
</ div >
</ body >
</ html >

这个div里面的内容就是圆角的，挺好的，以后要用圆角的东西，就可以直接Copy然后就在Table里面插入想要插入的

内容就可以了。