本文介绍了如何通过使用CSS的border-collapse属性来消除HTML表格中单元格边框之间的默认间距，实现更紧凑的布局效果。
html中<table>标签的单元格如果设置了边界，则相邻的单元格边界之间有间隔。
使用css的border-collapse 属性可以使得边界重合。
设置table的style="border-collapse:collapse;"
示例1 没有使用border-collapse
<html>
<head>
</head>
<body>
<table width="400px" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">
<tr height="100px">
<td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">1</td>
<td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">2</td>
</tr>
</table>
</body>
</html>
示例2 使用了border-collapse
<html>
<head>
</head>
<body>
<table width="400px" style=" BORDER-COLLAPSE: collapse; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">
<tr height="100px">
<td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">1</td>
<td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">2</td>
</tr>
</table>
</body>
</html>
扫一扫
3028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
