border-spacing属性允许你控制相邻单元格之间的距离。默认情况下,浏览器经常在每个单元格之间留有一个较小的空隙,如果你想增加或者减小这个空隙可以利用border-spacing属性来控制。
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> td { background-color: #0088dd; padding: 15px; border: 2px solid #000000;} table.one { border-spacing: 5px 15px; } table.two { border-collapse: collapse; } </style> </head> <body> <div>TODO write content</div> <table class="one"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <table class="two"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html>