内边距与间距
padding 单元格内边距、border-spacing 单元格间距
表格内边距与间距
padding 控制单元格内部空间，border-spacing 控制单元格之间的距离。
学完本章你将： 掌握 padding 内边距、border-spacing 间距。
padding 内边距
html
<style>
th, td {
padding: 15px; /* 四周一样 */
/* padding: 10px 20px; 上下10 左右20 */
/* padding: 5px 10px 15px 20px; 上 右 下 左 */
}
</style>border-spacing 间距
html
<style>
table {
border-collapse: separate; /* 必须是 separate */
border-spacing: 10px; /* 单元格间距 10px */
/* border-spacing: 10px 20px; 水平10 垂直20 */
}
</style>⚠️
border-collapse: collapse会忽略border-spacing。
两者对比
html
<!-- padding：内容到边框的距离 -->
<table border="1" style="border-collapse: collapse;">
<tr>
<td style="padding: 20px;">大内边距</td>
<td style="padding: 5px;">小内边距</td>
</tr>
</table>
<!-- border-spacing：单元格之间的距离 -->
<table border="1" style="border-spacing: 15px;">
<tr>
<td>间距 15px</td>
<td>间距 15px</td>
</tr>
</table>