代码:
<!DOCTYPE html> <!-- saved from url=(0046)http://vamin.net/examples/rounded_tables2.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Rounded Tables with CSS3</title> <style type="text/css"> table { background:#ccc; margin:20px; border:#ccc 1px solid; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px} table th {padding:4px 10px} table td { background:#fff; padding:2px 10px 4px 10px} table tr.even td {background:#eee} table tr:last-child td:first-child { -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-radius:10px} table tr:last-child td:last-child { -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-bottom-right-radius:10px} table.collapsed {border-collapse:collapse} </style> <style type="text/css"></style></head> <body> <h1>Rounded Tables with CSS3</h1> <p>Works in newer versions of Safari and Firefox. Degrades gracefully to square corners in IE and Opera.</p> <h2>Uncollapsed</h2> <table> <tbody><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr> <tr><td>1</td><td>1</td><td>2</td></tr> <tr class="even"><td>3</td><td>5</td><td>8</td></tr> <tr><td>13</td><td>21</td><td>34</td></tr> <tr class="even"><td>55</td><td>89</td><td>144</td></tr> <tr><td>233</td><td>377</td><td>610</td></tr> </tbody></table> <h2>Collapsed</h2> <p>Border-radius does not apply to tables with the border-collapse:collapse property set.</p> <table class="collapsed"> <tbody><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr> <tr><td>1</td><td>1</td><td>2</td></tr> <tr class="even"><td>3</td><td>5</td><td>8</td></tr> <tr><td>13</td><td>21</td><td>34</td></tr> <tr class="even"><td>55</td><td>89</td><td>144</td></tr> <tr><td>233</td><td>377</td><td>610</td></tr> </tbody></table> <h2>Cellspacing=0</h2> <table cellspacing="0"> <tbody><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr> <tr><td>1</td><td>1</td><td>2</td></tr> <tr class="even"><td>3</td><td>5</td><td>8</td></tr> <tr><td>13</td><td>21</td><td>34</td></tr> <tr class="even"><td>55</td><td>89</td><td>144</td></tr> <tr><td>233</td><td>377</td><td>610</td></tr> </tbody></table> </body></html>