一、問題再現
由於table表格本身具有特殊的cellspacing單元格間距,所以單元格之間默認是存在間隙的,如下圖所示:
如果不想要這個間隙那該怎么處理呢?方案有兩個。
二、解決方案
1.通過html的cellspacing參數值進行設置,代碼如下:
<table border="1" cellspacing="0"> //cellspacing是邊框與邊框之間的間隙大小,設置為0則表示單元格之間的距離為0 <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr>
</table>
效果圖:
2.通過CSS的border-collapse屬性值進行設置。代碼如下:
table {
margin: auto;
/* 相鄰兩個邊框合為一個邊框 */
border-collapse: collapse;
background-color: pink;
}
td {
width: 40px;
height: 40px;
}
</style>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
效果圖: