HTML5中Table如何消除边框(TD)间距

作者:滴水穿石 | 创建时间: 2023-07-25
用html5制作表格时,只是简单的想要实现表格内有边框,结果出现了双边框和单元格独立(有间距)的问题。本为大家分享一下我的处理过程及解决方法。...
HTML5中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; } 修改后单元格间距消除,完美实现效果。

以上是我的处理方法,希望能帮助到大家。

点击展开全文

更多推荐