2013/08/30 by 刘晓帆 187 views 遇到需要给TR加边框的需求，一定很头疼，因为目前还没发现有什么完美的方法解决这个问题，为了兼容性最后我只能选择给TD上下加边框，然后用JS判断第一个TD和最后一个TD的左右边框。 如果不考虑IE6和IE7的话用下面的最简单方法也可以，只是谷歌和火狐有点区别，还有一点小闪动现象。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给tr加边框</title> <style type="text/css"> body{ padding: 10px; } .tablewarp{ border:solid 1px #ccc;padding: 2px; } .otable{ width: 100%; border:none; border-collapse:collapse; } .otable tr{border-top:solid 1px transparent; } .otable tr:hover{ border:solid 1px blue; background: #eee; } .otable tr td{ border:none; padding: 5px; } </style> </head> <body> <div class="tablewarp"> <table class="otable" border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr class="cur"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </tbody> </table> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明来自：爱前端