HTML 去掉table表单里面td之间的间距

1.首先为大家展示一下最原始的代码和效果。直接在table中用td划分的表格会默认隐藏边框。


2.接下来我们用css来增加样式，为table增加边框。
table {

border: 1px solid #804040;

}

修改后的效果是整个table增加了外边框，table内还是没有边框。


3.然后我们用css来为td增加边框。
table td {

border: 1px solid #804040;

}

修改后的效果是每个td都增加了边框，显示效果为table全部显示单边框。


4. 接下来我采用了网上普遍推荐的方法，即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;

}

修改后的效果符合预期，但是内部边框显示不连续，原因是内部单元格之间有间距。


5. 最后，我们在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;

}

修改后单元格间距消除，完美实现效果。