HTML 去掉table表单里面td之间的间距
-
首先为大家展示一下最原始的代码和效果。直接在table中用td划分的表格会默认隐藏边框。
-
table {
border: 1px solid #804040;
}
修改后的效果是整个table增加了外边框，table内还是没有边框。
-
table td {
border: 1px solid #804040;
}
修改后的效果是每个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 {
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;
}
修改后单元格间距消除，完美实现效果。
