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

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

   

   
2. 接下来我们用css来增加样式&＃xff0c;为table增加边框。

   table {

   border: 1px solid #804040;

   }

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

   

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

   table td {

   border: 1px solid #804040;

   }

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

   

   
4. 接下来我采用了网上普遍推荐的方法&＃xff0c;即td显示左上两个边&＃xff0c;table显示右下两个边&＃xff0c;进而实现但边框表格效果。

   table {

   border-right: 1px solid #804040;

   border-bottom: 1px solid #804040;

   }

    

   table td {

   border-left: 1px solid #804040;

   border-top: 1px solid #804040;

   }

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

   

   
5. 最后&＃xff0c;我们在table中增加css代码&＃xff1a;border-collapse:collapse;用来消除单元格间距。

   即&＃xff1a;

   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;

   }

   修改后单元格间距消除&＃xff0c;完美实现效果。

   

   

   原文地址&＃xff1a;https://jingyan.baidu.com/article/d71306352f115b13fdf47589.html