HTML 去掉table表單里面td之間的間距

首先為大家展示一下最原始的代碼和效果。直接在table中用td划分的表格會默認隱藏邊框。

 接下來我們用css來增加樣式，為table增加邊框。

table {

border: 1px solid #804040;

}

修改后的效果是整個table增加了外邊框，table內還是沒有邊框。

 然后我們用css來為td增加邊框。

table td {

border: 1px solid #804040;

}

修改后的效果是每個td都增加了邊框，顯示效果為table全部顯示單邊框。

 接下來我采用了網上普遍推薦的方法，即td顯示左上兩個邊，table顯示右下兩個邊，進而實現但邊框表格效果。

table {

border-right: 1px solid #804040;

border-bottom: 1px solid #804040;

}

 

table td {

border-left: 1px solid #804040;

border-top: 1px solid #804040;

}

修改后的效果符合預期，但是內部邊框顯示不連續，原因是內部單元格之間有間距。

 最后，我們在table中增加css代碼：border-collapse:collapse;用來消除單元格間距。

即：

table {

border-right: 1px solid #804040;

border-bottom: 1px solid #804040;

border-collapse:collapse;

}

 

table td {

border-left: 1px solid #804040;

border-top: 1px solid #804040;

}

修改后單元格間距消除，完美實現效果。

 

原文地址： https://jingyan.baidu.com/article/d71306352f115b13fdf47589.html