table加边框时,有时候有的地方是一条线,有的地方是两条线,非常难看。我们可以使用style="border-collapse: collapse;"消除重复的边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> table{ 100%; } table tr td { border: solid 1px black; text-align: center; } </style> <body> <table style="border-collapse: collapse;"> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </body> </html>
效果如图所示: