如何在CSS中同时实现表格内边距与连续列边框？

我尝试复刻Terraria Fandom Wiki中的表格样式，借助现有CSS代码已实现大部分效果，但列间边框呈现断续状态。设置border-collapse:collapse可解决边框断续问题，却会导致表格整体边框与内容间的内边距消失，请问如何同时保留该内边距与连续列边框？

现有代码：

table {
    width: 100%;
    border: 1px solid black;
    border-radius: 4px;
    padding: 3px;
}
 
th {
    padding: 10px;
    background-color: black;
    color: white;
}

td + td { 
    border-left:1px solid black;
}

核心思路是放弃border-collapse: collapse，改用border-collapse: separate配合border-spacing: 0实现连续列边框，同时保留表格内边距。修改后的CSS如下：

table {
    width: 100%;
    border: 1px solid black;
    border-radius: 4px;
    padding: 3px;
    border-collapse: separate; /* 保持分离模式以保留表格内边距 */
    border-spacing: 0; /* 消除单元格间距，让列边框完全衔接 */
    overflow: hidden; /* 确保表格圆角正常生效，避免单元格边框溢出 */
}
 
th {
    padding: 10px;
    background-color: black;
    color: white;
}

td + td, th + th { /* 给表头和单元格统一添加列间边框 */
    border-left:1px solid black;
}

/* 可选：添加行边框，让表格样式更完整 */
td, th {
    border-bottom: 1px solid black;
}

关键说明 #

• border-collapse: separate：保留table元素的padding属性，避免内边距消失。
• border-spacing: 0：让单元格之间无间距，列间的border-left会完全连续，不会出现断续。
• overflow: hidden：解决表格设置圆角后，单元格边框超出圆角范围的视觉问题。
• 补充th + th规则：让表头列间也有连续边框，和表格主体样式统一。

内容的提问来源于stack exchange，提问作者coob