Shows the effect:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> <ptml xmlns =" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <title> pride </title> <style>. tab {border-collapse: collapse; border: 1px solid #9BDF70 ;}. tab td {border-bottom: 1px solid # 92B0DD; text-align: center ;}. tab th {border-bottom: 2px solid # 92B0DD ;}. tab th. end {border-bottom: 2px solid #9BDF70; border-top: 2px solid #9BDF70 ;}. tab tr {height: 25px ;} </style> </pead> <body> <table id = "tab" class = "tab" width = 500> <tr> <th> name </th> <th> QQ </th> <th> E-mail </th> </tr> <td> pride </td> <td> 249056406 </td> <td> jikeytang@gmail.com </td> </tr> <td> tony </td> <td> 1234567 </td> <td> puag@gmail.com </td> </ tr> <td> tony </td> <td> 1234567 </td> <td> puag@gmail.com </td> </tr> <td> tony </td> <td> 1234567 </td> <td> puag@gmail.com </td> </tr> <td> tony </td> <td> 1234567 </td> <td> puag@gmail.com </td> </tr> <th> pride </th> <th> incredible </th> <th> true </th> </tr> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]