摘要：
有些情况下需要给表格设置圆角，但是border-radius与border-collapse:collapse;会产生冲突，给table设置border-radius并不会生效。可以通过减少单元格框线的方式来不设置boder-collapse;collapse;这样就能给表格添加圆角了。
有些情况下需要给表格设置圆角，但是border-radius与border-collapse:collapse;会产生冲突，给table设置border-radius并不会生效。
可以通过减少单元格框线的方式来不设置boder-collapse;collapse; 这样就能给表格添加圆角了。
源码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 table{ 9 margin:50px auto; 10 border-spacing:0; 11 } 12 table th{ 13 width:100px; 14 height:30px; 15 line-height:30px; 16 background:gray; 17 color:white; 18 } 19 table td{ 20 width:100px; 21 height:30px; 22 text-align:center; 23 line-height:30px; 24 } 25 table tr th:first-child, 26 table tr td:first-child{ 27 border-left:1px solid gray; /*给table设置左边框 */ 28 } 29 table tr th:last-child, 30 table tr td:last-child{ 31 border-right:1px solid gray; /*给table设置右边框 */ 32 } 33 table tr td:first-child, 34 table tr td:nth-child(2), 35 table tr td:nth-child(3){ 36 border-bottom:1px solid gray; /*给tbody各列设置下边框 */ 37 } 38 table tr:first-child th:first-child{ 39 border-top-left-radius:10px; /*设置table左上圆角 */ 40 } 41 table tr:first-child th:last-child{ 42 border-top-right-radius:10px; /*设置table右上圆角 */ 43 } 44 table tr:last-child td:first-child{ 45 border-bottom-left-radius:10px; /*设置table左下圆角 */ 46 } 47 table tr:last-child td:last-child{ 48 border-bottom-right-radius:10px;/*设置table右下圆角 */ 49 } 50 </style> 51 </head> 52 <body> 53 <table> 54 <thead> 55 <tr> 56 <th>1-1</th> 57 <th>1-2</th> 58 <th>1-3</th> 59 </tr> 60 </thead> 61 <tbody> 62 <tr> 63 <td>2-1</td> 64 <td>2-2</td> 65 <td>2-3</td> 66 </tr> 67 <tr> 68 <td>3-1</td> 69 <td>3-2</td> 70 <td>3-3</td> 71 </tr> 72 <tr> 73 <td>4-1</td> 74 <td>4-2</td> 75 <td>4-3</td> 76 </tr> 77 </tbody> 78 </table> 79 </body> 80 </html>
效果图如下：
